我使用JQuery这样:

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

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

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


当前回答

非常感谢大卫沃尔什,这里是一个香草版本的下划线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

其他回答

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

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

用法:

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

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

非常感谢大卫沃尔什,这里是一个香草版本的下划线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

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

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

实际上,据我所知,当resize关闭时,您不能准确地执行某些操作,因为您不知道未来用户的操作。但是您可以假设两次调整大小事件之间的时间间隔,因此如果您等待的时间比这个时间稍长,并且没有进行调整大小,则可以调用您的函数。 我们使用setTimeout和它的id来保存或删除它。例如,我们知道两次调整大小事件之间的时间是500ms,因此我们将等待750ms。

var; $(窗口).resize(函数(){ clearTimeout(一个); a = setTimeout(函数(){ //调用函数 }, 750); });

这是我实现的:

$(window).resize(function(){ setTimeout(someFunction, 500); });

如果我们期望resize发生的时间小于500ms,我们可以清除setTimeout

祝你好运…