Question

我的代码如下：

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

interactionScreen();   

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

我想要实现的是，当浏览器调整大小小于970时，它将运行其他代码。问题是当页面加载时，脚本位于＆gt; 970将首先运行，如果我调整浏览器大小，两个脚本＆gt; 970和＆lt; 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();
});

fiddle

基于不同屏幕尺寸javascript的杀戮和加载功能

1 个答案: