窗口调整事件

Question

var windowWidth = $(window).width();    
function mobileResponsiveCheck(){
    if(windowWidth >= 768){
        box3Responsiveness();
    }else if(windowWidth < 768){
        null;
    }
}

$(window).resize(function(){
    mobileResponsiveCheck();
});
mobileResponsiveCheck();

因此，我希望每次用户调整大小时都运行函数mobileResponsiveCheck()，如果重新加载，也要运行该函数。当调整窗口大小时，如果窗口小于768 do，那么它应该什么也不做。但是，只有当我在它小于768 is之后重新加载它时，才会发生这种情况。我想要的是在用户调整大小时停止box3Responsiveness()，在不重新加载的情况下获得768 is以下。

Answer 1

您定义了全局windowWidth。变量只设置一次，即脚本第一次运行时。但是，值在调整大小时不会改变，因为您没有告诉它。要改变这一点，请将变量声明放入函数中。那样的话，它就会在必要的时候改变。

function mobileResponsiveCheck(){
    var windowWidth = $(window).width();  
    if(windowWidth >= 768){
        box3Responsiveness();
    }
}

$(window).resize(function(){
    mobileResponsiveCheck();
});
mobileResponsiveCheck();

Answer 2

mobileResponsiveCheck() {
  if (window.innerWidth >= 768){
    box3Responsiveness();
  }
}

window.addEventListener('resize', mobileResponsiveCheck);
mobileResponsiveCheck();