所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
所以我目前使用的是:
$(window).resize(function(){resizedw();});
但是在调整大小过程中,这个函数会被调用很多次。是否有可能在事件结束时捕获事件?
当前回答
我很幸运地推荐了以下网站: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');
}
}
谢谢森那美。Vidas for code!
其他回答
我很幸运地推荐了以下网站: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');
}
}
谢谢森那美。Vidas for code!
就窗口管理器而言,每个调整大小事件都是它自己的消息,具有不同的开始和结束,因此从技术上讲,每次调整窗口大小时,它都是结束。
话虽如此,也许你想推迟你的延续?举个例子。
var t = -1;
function doResize()
{
document.write('resize');
}
$(document).ready(function(){
$(window).resize(function(){
clearTimeout(t);
t = setTimeout(doResize, 1000);
});
});
var resizeTimer;
$( window ).resize(function() {
if(resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function() {
//your code here
resizeTimer = null;
}, 200);
});
这为我试图在chrome做什么工作。这将不会触发回调直到200ms后最后调整大小事件。
因为选择的答案实际上没有工作。如果你没有使用jquery,这里有一个简单的节流函数的例子,如何使用它来调整窗口大小
function throttle(end,delta) {
var base = this;
base.wait = false;
base.delta = 200;
base.end = end;
base.trigger = function(context) {
//only allow if we aren't waiting for another event
if ( !base.wait ) {
//signal we already have a resize event
base.wait = true;
//if we are trying to resize and we
setTimeout(function() {
//call the end function
if(base.end) base.end.call(context);
//reset the resize trigger
base.wait = false;
}, base.delta);
}
}
};
var windowResize = new throttle(function() {console.log('throttle resize');},200);
window.onresize = function(event) {
windowResize.trigger();
}
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) );