我使用JQuery这样:
$(window).resize(function() { ... });
但是，如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小，上面的.resize事件会触发多次。
问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?
当前回答
前面提到的一些解决方案对我不起作用，尽管它们的用途更广泛。或者，我发现了这一个，在窗口大小调整的工作:
$(window).bind('resize', function(e){
window.resizeEvt;
$(window).resize(function(){
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function(){
//code to do after window is resized
}, 250);
});
});
其他回答
假设鼠标光标在窗口调整大小后应该返回到文档，我们可以使用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);
});
实际上，据我所知，当resize关闭时，您不能准确地执行某些操作，因为您不知道未来用户的操作。但是您可以假设两次调整大小事件之间的时间间隔，因此如果您等待的时间比这个时间稍长，并且没有进行调整大小，则可以调用您的函数。 我们使用setTimeout和它的id来保存或删除它。例如，我们知道两次调整大小事件之间的时间是500ms，因此我们将等待750ms。
var; $(窗口).resize(函数(){ clearTimeout(一个); a = setTimeout(函数(){ //调用函数 }, 750); });
这对我很管用。 请参阅此解决方案- https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/
var resizeId; $(窗口).resize(函数(){ clearTimeout (resizeId); resizeId = setTimeout(doneResizing, 500); })； 函数doneResizing () { //我们想做的任何事情 ｝
我使用以下函数来延迟重复操作，它将适用于您的情况:
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
