基于不同屏幕尺寸的 javascript 的终止和加载功能

Question

我有这样的代码：

function interactionScreen(){
   if ($(window).width() > 970) {  
      do something..
   } else if ($(window).width() < 970) {  
      do something..
   }
}
interactionScreen();   
$(window).resize(function() {
   interactionScreen();  
});

我想实现的是，当浏览器大小调整为小于 970 时，它将运行其他代码。问题是当页面加载时，> 970 下的脚本将首先运行，如果我调整浏览器大小，脚本> 970 和 <970 都会运行，只是想知道是否有任何"破坏"脚本并重新运行函数？

Answer 1

您可以等到浏览器窗口至少 x 毫秒没有更改其大小，然后再执行函数

var interactionScreen = (function(window) {
    var timer,
        w = $(window);
    return function(executeImmediately) {
        clearTimeout(timer);
        timer = setTimeout(function() {
                    var currentWidth = w.width();
                    if (currentWidth > 970) {
                        console.log("> 970");
                    } else {
                        console.log("<= 970");
                    }
                }, executeImmediately ? 0 : 200);
    };
}(window));
interactionScreen(true);
window.addEventListener("resize", function() {
    interactionScreen();
});

小提琴