jQuery window.matchMedia冲突函数

Question

很难理解这到底是怎么回事。代码按预期工作，但由于某种原因，当窗口被调整大小，新函数被触发时，旧函数仍然在触发，所以它是一团糟。*-/

我相信还有更好的方法来写这个。我只希望"isMobile“运行时，最大宽度: 1024和"isNotMobile”时，最大宽度大于1024，但只有一个运行，不是同时运行。有更好的方法吗？

$(document).ready(function(){
    $(window).resize(function() {

        var isMobile = window.matchMedia("only screen and (max-width: 1024px)");
        var isNotMobile = window.matchMedia("only screen and (min-width: 1024px)");

        if (isMobile.matches) {
            $('#wpi-page-left').removeClass("active");
            $('#wpi-page-left').addClass("not-active");

            $( '#wpi-page-center' ).click(function(e) {
                var $this = $('#wpi-page-left');
                if ($this.hasClass('active')) {
                    $('#wpi-page-left').removeClass('active');
                    $('#sidebar').removeClass('active');
                    $('#wpi-page-left').addClass('not-active');
                }
            });
            $( '#mobile-toggle-btn' ).click(function(e){
                var $this = $('#wpi-page-left');
                if ($this.hasClass('not-active')) {
                    $('#wpi-page-left').removeClass('not-active');
                    $('#wpi-page-left').addClass('active');
                    $('#sidebar').addClass('active');
                } else if ($this.hasClass('active')) {
                    $('#wpi-page-left').removeClass('active');
                    $('#sidebar').removeClass('active');
                    $('#wpi-page-left').addClass('not-active');
                }
            });
        } else if (isNotMobile.matches) {
            setTimeout(function() {
                $( '#wpi-page-left' ).removeClass( 'active' );
            }, 1000);

            var timer;
            var delay = 350;

            $('#wpi-page-left').hover(function() {
                timer = setTimeout(function() {
                    $('#wpi-page-left').addClass( 'active' );
                    $('#wpi-page-left').removeClass( 'not-active' );
                }, delay);
            }, function() {
                $('#wpi-page-left').removeClass( 'active' );
                $('#wpi-page-left').addClass( 'not-active' );
                clearTimeout(timer);
            });
       }
      $("#dimensions").html($(window).width());
}).resize();

})；

更新：

下面是一个显示问题的小提琴：https://jsfiddle.net/hwqegaza/9/

我在小提琴中添加了说明，但基本上加载页面，并在栏上悬停或单击移动版本(取决于加载页面的宽度)，现在调整页面大小并尝试使用不同版本的菜单。您将看到这两个版本都在运行。*-/

Answer 1

必须将事件侦听器添加到当前窗口的resize事件中，才能使其工作。您的代码意味着，只有当DOM准备就绪时，才执行检查，这就是为什么每次视口宽度发生变化时都需要重新加载。

$(window).resize(function() {
  // your code
  // e.g check the width: console.log($(this).innerWidth());
});
// OR
$(window).resize(() => console.log($(this).innerWidth()))

调整大小的jQuery文档

MDN window.innerWidth文档