所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
当前回答
有一个优雅的解决方案使用下划线。js所以,如果你在你的项目中使用它,你可以做以下-
$( window ).resize( _.debounce( resizedw, 500 ) );
这应该足够了:)但是,如果你有兴趣阅读更多,你可以查看我的博客文章- http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore-debounce(deadlink)
其他回答
Internet Explorer提供一个resizeEnd事件。其他浏览器会在您调整大小时多次触发调整大小事件。
这里还有其他很好的答案,展示了如何使用setTimeout和lodash和下划线中的.throttle, .debounce方法,所以我将提到Ben Alman的throttle-debounce jQuery插件,它实现了你想要的东西。
假设你有这样一个函数,你想在调整大小后触发:
function onResize() {
console.log("Resize just happened!");
};
节流阀的例子 在下面的例子中,onResize()在调整窗口大小的过程中只会每250毫秒调用一次。
$(window).resize( $.throttle( 250, onResize) );
防反跳的例子 在下面的例子中,onResize()只会在窗口调整动作结束时被调用一次。这与@Mark在他的回答中呈现的结果相同。
$(window).resize( $.debounce( 250, onResize) );
Mark Coleman的答案当然比所选的答案要好得多,但如果你想避免超时ID的全局变量(Mark回答中的doit变量),你可以做以下其中之一:
(1)使用立即调用的函数表达式(IIFE)来创建闭包。
$(window).resize((function() { // This function is immediately invoked
// and returns the closure function.
var timeoutId;
return function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
timeoutId = null; // You could leave this line out.
// Code to execute on resize goes here.
}, 100);
};
})());
(2)使用事件处理函数的属性。
$(window).resize(function() {
var thisFunction = arguments.callee;
clearTimeout(thisFunction.timeoutId);
thisFunction.timeoutId = setTimeout(function() {
thisFunction.timeoutId = null; // You could leave this line out.
// Code to execute on resize goes here.
}, 100);
});
这是我用来延迟重复操作的,它可以在你的代码中的多个地方调用:
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);
};
};
用法:
$(window).resize(function () {
debounce(function() {
//...
}, 500);
});
这是我根据@Mark Coleman的答案写的代码:
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
console.log('Resized finished.');
}, 250);
});
谢谢马克!
你可以使用setTimeout()和clearTimeout()
function resizedw(){
// Haven't resized in 100ms!
}
var doit;
window.onresize = function(){
clearTimeout(doit);
doit = setTimeout(resizedw, 100);
};
jsfiddle上的代码示例。