调整大小事件之前(Before after resize event)

调整大小事件之前(Before after resize event)

我想在调整元素大小之前和之后做一些事情，我试图绑定调整大小事件，它的工作原理：

$('#test_div').bind('resize', function(){ // do something });

我发现了一些问题，但解决方案timeout ，我不想使用timeout 。 我只想立即处理:)

也可以看看：

JavaScript / JQuery：$（window）.resize如何在调整大小完成后触发？

jQuery - 如何等待“结束”或“调整大小”事件，然后才执行操作？

感谢任何建议:)

I would like to do something before and after resizing element, i have tried to bind resize event and it work:

$('#test_div').bind('resize', function(){ // do something });

I have found some questions, but the solutions are timeout, i don't want to use timeout. I would just like to process immediately :)

See also:

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?

Thank for any suggestions :)

最满意答案

没有你可以听到的调整结束事件这样的事情。 要知道用户完成调整大小的唯一方法是等待一段时间过去，而不再发生任何调整大小事件。 这就是为什么这个解决方案几乎总是涉及到使用setTimeout()因为这是知道一段时间已经过去而没有更多大小调整事件的最佳方式。

我以前的回答是监听.scroll()事件，但它与.resize()完全相同： 在jquery中处理$（window）.scroll函数的更有效方法是？ 你可以像这样使用相同的概念来调整大小：

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值，看看您是否喜欢它。 数字越小，调用调整大小处理程序的速度越快，但可能会多次调用它。 数字越大，发射前暂停的时间越长，但在同一用户操作期间不太可能发射多次。

如果您想在调整大小之前执行某些操作，那么您必须在获取的第一个调整大小事件上调用一个函数，然后在当前大小调整操作期间不再调用该函数。

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); }

There is no such thing as a resize end event that you can listen to. The only way to know when the user is done resizing is to wait until some short amount of time passes with no more resize events coming. That's why the solution nearly always involves using a setTimeout() because that's the best way to know when some period of time has passed with no more resize events.

This previous answer of mine listens for the .scroll() event, but it's the exact same concept as .resize(): More efficient way to handle $(window).scroll functions in jquery? and you could use the same concept for resize like this:

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); }

You can experiment with the 500 value for the timer to see how you like it. The smaller the number, the more quickly it calls your resize handler, but then it may get called multiple times. The larger the number, the longer pause it has before firing, but it's less likely to fire multiple times during the same user action.

If you want to do something before a resize, then you will have to call a function on the first resize event that you get and then not call that function again during the current resize operation.

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); }