我正在使用 JQuery：
$(window).resize(function() { ... });
但是，似乎如果该人通过拖动窗口边缘使其变大/变小来手动调整浏览器窗口的大小，则.resize上述事件会多次触发。
问题：如何在浏览器窗口调整大小完成后调用函数（以便事件只触发一次）？
JavaScript/JQuery：$(window).resize 如何在调整大小完成后触发？
IT技术
javascript
jquery
2021-01-30 06:07:32
6个回答
这是 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 它们共享timer变量。
通过此修改，您为每个回调提供一个唯一 ID，这些唯一 ID 用于将所有超时事件分开。
我更喜欢创建一个事件：
$(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 delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
用法：
$(window).resize(function() {
delay(function(){
alert('Resize...');
//...
}, 500);
});
传递给它的回调函数只有在指定时间后最后一次调用延迟时才会执行，否则计时器将被重置，我发现这对于其他目的很有用，例如检测用户何时停止输入等。 ..
如果你安装了 Underscore.js，你可以：
$(window).resize(_.debounce(function(){
alert("Resized");
},500));
前面提到的一些解决方案对我不起作用，即使它们具有更广泛的用途。或者，我发现这个可以调整窗口大小的工作：
$(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);
});
});