基于不同屏幕尺寸的Kill and Load功能

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

小提琴