我使用JQuery这样:

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

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

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


当前回答

如果你安装了Underscore.js,你可以:

$(window).resize(_.debounce(function(){
    alert("Resized");
},500));

其他回答

这对我很管用。 请参阅此解决方案- https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/

var resizeId; $(窗口).resize(函数(){ clearTimeout (resizeId); resizeId = setTimeout(doneResizing, 500); }); 函数doneResizing () { //我们想做的任何事情 }

非常感谢大卫沃尔什,这里是一个香草版本的下划线debounce。

代码:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

简单的用法:

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

$(window).on('resize', myEfficientFn);

裁判:http://davidwalsh.name/javascript-debounce-function

我喜欢创建一个事件:

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

声明全局延迟侦听器:

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用于将所有超时事件分开。