JavaScript/JQuery: $(window).resize 在调整大小完成后如何触发?
2022-08-30 00:37:08
我正在使用JQuery:
$(window).resize(function() { ... });
但是,如果用户通过拖动窗口边缘以使其变大/变小来手动调整其浏览器窗口的大小,则上述事件将触发多次。.resize
问题:如何在浏览器窗口调整大小完成后调用函数(以便事件仅触发一次)?
我正在使用JQuery:
$(window).resize(function() { ... });
但是,如果用户通过拖动窗口边缘以使其变大/变小来手动调整其浏览器窗口的大小,则上述事件将触发多次。.resize
问题:如何在浏览器窗口调整大小完成后调用函数(以便事件仅触发一次)?
以下是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,则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文件中有这个。