Question

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

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

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

另见：

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?

感谢任何建议：）

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

如果你想在调整大小之前做一些事情，那么你必须在你得到的第一个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()。

然后，它不会等待调整大小的结束......它只是限制它。

Answer 3

您也可以尝试其他方法。

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

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

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

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

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

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

在调整大小事件之前

3 个答案: