JavaScript/JQuery：$(窗口)。调整大小如何在调整大小完成后触发？

Question

JavaScript/JQuery：$(窗口)。调整大小如何在调整大小完成后触发？我使用这样的JQuery：$(window).resize(function() { ... });但是，如果该人通过拖动窗口边缘使其更大/更小来手动调整浏览器窗口的大小，则.resize事件多次触发。问题：如何在浏览器窗口调整大小完成后(使事件只触发一次)调用函数？

Answer 1

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

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

用法：

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

传递给它的回调函数，只有在最后一次延迟调用在指定的时间之后才会执行，否则计时器会被重置，我发现这对于检测用户停止键入的时间等其他用途很有用。

Answer 2

我更喜欢创建一个活动：

$(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文件中。