Jquery 前后调整大小事件

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

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

我发现了一些问题，但解决方案是

timeout

，我不想使用

timeout

。我只想立即处理：）

另请参见：

---

感谢您的建议：）

没有什么调整结束事件可以听。知道用户何时完成调整大小的唯一方法是等待一段短时间，不再发生调整大小事件。这就是为什么解决方案几乎总是使用

setTimeout（）

，因为这是了解某个时间段何时已过且不再发生调整大小事件的最佳方法

我前面的回答侦听

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

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

您可以尝试使用计时器的

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

您可以使用jQuery插件，但最终它仍然使用

setTimeout（）

---

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

您也可以尝试另一种方法

首先创建一个方法来获取活动断点（移动、平板、桌面、桌面大）ie断点。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（最新值）将保留当前断点信息

这样，您就可以在没有超时的情况下进行前后比较

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

示例：假设我想知道调整大小后，我是从移动设备移动到桌面还是大型桌面。然后，我将使用如下内容：

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

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

---

让我知道这是否对你有效

也许有一个很好的理由说明为什么这总是解决方案……在调整窗口大小之前，你如何做一些事情，你需要心灵感应能力来知道用户何时考虑调整窗口大小？至于after，大多数浏览器几乎连续触发resize事件，因此需要一个超时来查看resize事件何时停止触发一段时间。在这种情况下，

setTimeout

有什么问题？@ronnk listen to jfriend00，他是wise@Barmaradeneo Freshyeball Matthew Blancarte：我只想立即处理我的游戏：）谢谢你的建议：）非常感谢你的解决方案，

timeout

可能是解决这个问题的唯一方法：）谢谢，但现在这对我来说不是问题：）