调整大小前后事件

Question

在调整元素大小之前和之后，我想做一些事情，我尝试绑定调整大小事件并且它有效：

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

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

另请参阅：

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

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

感谢任何建议 :)

- Rong Nguyen

---

或许总是采用那个方案有其合理之处。 - Barmar

在调整大小之前如何执行某些操作，你需要有心灵感应的能力才能知道用户何时想要调整窗口大小。至于调整大小之后，大多数浏览器几乎持续触发调整大小事件，因此需要设置一个超时来判断调整大小事件在一定时间内是否停止触发。 - adeneo

在这种情况下，setTimeout有什么问题？ - Matthew Blancarte

@RongNK听jfriend00的话，他很明智。 - Fresheyeball

@Barmar、adeneo、Fresheyeball和Matthew Blancarte：我想立即处理我的游戏 :) - Rong Nguyen

Answer 1

没有可以监听的调整大小结束事件。唯一的方法是等待一段短时间，直到没有更多的调整大小事件出现，才能知道用户何时完成调整大小。这就是为什么解决方案几乎总是涉及使用 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，以查看你喜欢的效果。数字越小，调用大小调整处理程序的速度就越快，但可能会被调用多次。数字越大，在触发之前暂停的时间就越长，但在同一用户操作期间不太可能多次触发。

如果你想在大小调整之前做一些事情，则必须在获得第一个大小调整事件时调用一个函数，然后在当前大小调整操作期间不再调用该函数。

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

- jfriend00

---

非常感谢您提供的解决方案，timeout 可能是解决这个问题的唯一途径 :) - Rong Nguyen

Answer 2

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

首先创建一个获取活动断点（移动端、平板电脑、桌面、大型桌面）的方法，即Breakpoint.getActive()。

然后使用一个数组来保存在调整大小时记录的最后两个状态。

示例代码：

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（最新值）将保留当前断点信息。这样，您就可以进行前/后比较，而无需使用timeout。调整大小后，您可以比较beforeAfterResize [0]和beforeAfterResize [1]之间的值，如果它们不同，则可以执行某些操作。例如：假设我想知道调整大小后是否从移动设备转到桌面或大型桌面。然后我会使用类似以下内容的东西：

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

让我知道这对你是否有效。

- Manuel Cheța

---

谢谢，但现在对我来说不是问题 :) - Rong Nguyen

Answer 3

你可以使用智能调整大小jQuery插件，但最终它仍然会使用setTimeout()。

再次说明，它不会等待调整大小结束... 它只是限制了它的频率。

- VVV