所以我目前使用类似的东西:
$(window).resize(function(){resizedw();});
但是在调整大小的过程中,这会被多次调用。是否可以在事件结束时捕获事件?
所以我目前使用类似的东西:
$(window).resize(function(){resizedw();});
但是在调整大小的过程中,这会被多次调用。是否可以在事件结束时捕获事件?
您可以使用setTimeout()
和clearTimeout()
function resizedw(){
// Haven't resized in 100ms!
}
var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(resizedw, 100);
};
jsfiddle上的代码示例。
我对以下建议很幸运:http : //forum.jquery.com/topic/the-resizeend-event
这是代码,因此您不必仔细阅读他的帖子的链接和来源:
var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
function resizeend() {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
alert('Done resizing');
}
}
感谢 sime.vidas 的代码!
这是我根据@Mark Coleman 的回答编写的代码:
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
console.log('Resized finished.');
}, 250);
});
谢谢马克!
Internet Explorer 提供了一个resizeEnd事件。在您调整大小时,其他浏览器会多次触发调整大小事件。
这里还有其他很棒的答案,展示了如何使用 setTimeout 和.throttle,.debounce方法来自 lodash 和下划线,所以我会提到 Ben Alman 的油门去抖动 jQuery 插件,它可以完成你想要的。
假设您有一个要在调整大小后触发的函数:
function onResize() {
console.log("Resize just happened!");
};
Throttle 示例
在下面的示例中,onResize()
在窗口大小调整期间将仅每 250 毫秒调用一次。
$(window).resize( $.throttle( 250, onResize) );
Debounce 示例
在下面的示例中,onResize()
只会在窗口大小调整操作结束时调用一次。这与@Mark 在他的回答中给出的结果相同。
$(window).resize( $.debounce( 250, onResize) );
有一个使用Underscore.js的优雅解决方案因此,如果您在项目中使用它,您可以执行以下操作 -
$( window ).resize( _.debounce( resizedw, 500 ) );
这应该足够了 :) 但是,如果您有兴趣阅读更多相关信息,可以查看我的博客文章 - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore -去抖动(死链)