在resize事件之前

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

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

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

也可以看看：

• JavaScript / JQuery：$（window）.resize如何在resize完成后触发？

• jQuery – 如何等待’结束’或’resize’事件，然后才执行操作？

感谢任何建议:)

Answer 1

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

我之前的回答是监听.scroll()事件，但它与.resize()概念完全相同： 在jquery中处理$（window）.scroll函数的更有效方法？ 并且您可以使用相同的概念进行resize，如下所示：

 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之前做一些事情，那么你将不得不在你得到的第一个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); } 

Answer 2

你可以使用smart resize jQuery插件，但最后它仍然使用setTimeout() 。

然后，它不会等待resize的结束……它只是限制它。

Answer 3

你也可以尝试另一种方法。

首先创建一个方法来获取活动断点（移动，平板电脑，桌面，桌面大），即Breakpoint.getActive（）

然后使用数组来保存resize时记录的最后两个状态。

示例代码：

 var beforeAfterResize = []; $(window).resize(function() { var resizeInfo = Breakpoint.getActive(); if (beforeAfterResize.length > 1) { beforeAfterResize[0] = beforeAfterResize[1]; beforeAfterResize[1] = resizeInfo; } else { beforeAfterResize.push(resizeInfo); } console.log(beforeAfterResize); }); 

名为beforeAfterResize的数组仅在位置0和1中存储两个值。如果您有多于2个值，则位置0接受位置1的值，位置1（最新值）将保留当前断点信息。

通过这种方式，您可以在没有超时的情况下进行前/后比较。

resize后，您将能够比较beforeAfterResize [0]和beforeAfterResize [1]之间的值，如果它们不同，您可以执行一些操作。

示例：假设我想知道resize后是否从移动设备移动到桌面或大型桌面。 然后我将使用这样的东西：

  var fromMobile = false; if ( (( beforeAfterResize[0] === "mobile" ) || ( beforeAfterResize[0] === "tablet" )) && (( beforeAfterResize[1] === "desktop" ) || ( beforeAfterResize[1] === "desktop-large" )) ) { fromMobile = true; } 

如果这对您有用，请告诉我。