Question

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

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

所以我想在每次用户调整大小时以及重新加载时运行mobileResponsiveCheck（）函数。在窗口小于768px的情况下调整大小时，它应该什么都不做。但这只有在我小于768px后重新加载时才会发生。我想要的是box3Responsiveness（）在用户调整大小时停止并且在没有重新加载的情况下低于768px。

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();

Answer 3

试试这个

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

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

窗口调整大小事件

3 个答案: