我使用JQuery这样:
$(window).resize(function() { ... });
但是，如果用户通过拖动窗口边缘来手动调整浏览器窗口的大小，上面的.resize事件会触发多次。
问题:如何在浏览器窗口调整大小完成后调用函数(使事件只触发一次)?
当前回答
这是我实现的:
$（window）.resize（function（）{ setTimeout（someFunction， 500）; });
如果我们期望resize发生的时间小于500ms，我们可以清除setTimeout
祝你好运…
其他回答
许多解决方案。我尝试在mouuseevent之后执行事件，所以我在ouse进入窗口后添加了重载:
jQuery(window).resize(function() {
// this. is window
if( this.resizeTO) {
clearTimeout(this.resizeTO)
};
this.resizeTO = setTimeout(function() {
jQuery(window).mouseenter(function() {
if( jQuery(window).width() < 700 && jQuery(window).width() > 400 ){
console.log("mouseenter reloads elements");
// is loading the page
location.reload();
//
}; // just mobile
}); // mouse fired
}, 400); // set Time Ouuut
});
我喜欢创建一个事件:
$(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文件中。
这是我实现的:
$（window）.resize（function（）{ setTimeout（someFunction， 500）; });
如果我们期望resize发生的时间小于500ms，我们可以清除setTimeout
祝你好运…
假设鼠标光标在窗口调整大小后应该返回到文档，我们可以使用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);
});
以下是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用于将所有超时事件分开。
