我想在调整元素大小之前和之后做一些事情,我试图绑定resize事件并且它工作：
$('#test_div').bind('resize',function(){
// do something
});
我发现了一些问题,但解决方案是超时,我不想使用超时.我想立即处理:)
也可以看看：
> JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
> jQuery – how to wait for the ‘end’ or ‘resize’ event and only then perform an action?
感谢任何建议:)
解决方法
没有你可以听的调整大小结束事件.知道用户何时完成大小调整的唯一方法是等到一段短时间过去而不再有调整大小事件.这就是为什么解决方案几乎总是涉及使用setTimeout(),因为这是知道何时已经过去而没有更多调整大小事件的最佳方式.
我之前的回答是听取.scroll()事件,但它与.resize()：More efficient way to handle $(window).scroll functions in jquery?的概念完全相同,你可以使用相同的概念进行调整大小,如下所示：
var resizeTimer;
$(window).resize(function () {
if (resizeTimer) {
clearTimeout(resizeTimer); // clear any prevIoUs pending timer
}
// set new timer
resizeTimer = setTimeout(function() {
resizeTimer = null;
// put your resize logic here and it will only be called when
// there's been a pause in resize events
},500);
}
您可以尝试使用计时器的500值来查看您的喜好.数字越小,调用调整大小处理程序的速度就越快,但随后可能会多次调用它.数字越大,射击前的暂停时间越长,但在同一用户操作期间不太可能多次触发.
如果你想在调整大小之前做一些事情,那么你将不得不在你得到的第一个resize事件上调用一个函数,然后在当前的resize操作期间不再调用该函数.
var resizeTimer;
$(window).resize(function () {
if (resizeTimer) {
clearTimeout(resizeTimer); // clear any prevIoUs pending timer
} else {
// must be first resize event in a series
}
// set new timer
resizeTimer = setTimeout(function() {
resizeTimer = null;
// put your resize logic here and it will only be called when
// there's been a pause in resize events
},500);
}
