我使用JQuery这样:

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

但是,如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小,上面的.resize事件会触发多次。

问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?


当前回答

假设鼠标光标在窗口调整大小后应该返回到文档,我们可以使用onmouseover事件创建一个类似回调的行为。不要忘记,这个解决方案可能不适用于预期的触摸屏。

var resizeTimer;
var resized = false;
$(window).resize(function() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(function() {
       if(!resized) {
           resized = true;
           $(document).mouseover(function() {
               resized = false;
               // do something here
               $(this).unbind("mouseover");
           })
       }
    }, 500);
});

其他回答

我使用以下函数来延迟重复操作,它将适用于您的情况:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

用法:

$(window).resize(function() {
    delay(function(){
      alert('Resize...');
      //...
    }, 500);
});

传递给它的回调函数,只会在指定的时间量之后执行最后一次调用延迟,否则计时器将被重置,我发现这对于其他目的很有用,如检测用户何时停止输入等…

声明全局延迟侦听器:

var resize_timeout;

$(window).on('resize orientationchange', function(){
    clearTimeout(resize_timeout);

    resize_timeout = setTimeout(function(){
        $(window).trigger('resized');
    }, 250);
});

下面使用监听器来调整事件大小:

$(window).on('resized', function(){
    console.log('resized');
});

以下是CMS解决方案的修改,可以在代码中的多个地方调用:

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

用法:

$(window).resize(function () {
    waitForFinalEvent(function(){
      alert('Resize...');
      //...
    }, 500, "some unique string");
});

CMS的解决方案是很好的,如果你只调用它一次,但如果你调用它多次,例如,如果你的代码的不同部分设置了单独的回调窗口调整大小,那么它将失败b/c他们共享计时器变量。

通过这种修改,您可以为每个回调提供一个惟一的id,这些惟一id用于将所有超时事件分开。

我喜欢创建一个事件:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

下面是如何创建它:

 $(window).resize(function() {
        if(this.resizeTO) clearTimeout(this.resizeTO);
        this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
        }, 500);
    });

你可以把它放在某个全局javascript文件中。

假设鼠标光标在窗口调整大小后应该返回到文档,我们可以使用onmouseover事件创建一个类似回调的行为。不要忘记,这个解决方案可能不适用于预期的触摸屏。

var resizeTimer;
var resized = false;
$(window).resize(function() {
   clearTimeout(resizeTimer);
   resizeTimer = setTimeout(function() {
       if(!resized) {
           resized = true;
           $(document).mouseover(function() {
               resized = false;
               // do something here
               $(this).unbind("mouseover");
           })
       }
    }, 500);
});