4

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

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

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

也可以看看：

感谢您的任何建议:)

4

3 回答 3

10

没有可以收听的调整大小结束事件之类的东西。知道用户何时完成调整大小的唯一方法是等待一段时间，直到没有更多调整大小事件发生。这就是解决方案几乎总是涉及使用 a 的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);  
}
于 2013-05-16T02:41:06.927 回答
1

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

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

于 2013-05-16T02:44:38.720 回答
1

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

首先创建一个获取活动断点的方法（移动设备、平板电脑、桌面设备、大型桌面设备），即 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;
}

让我知道这是否对您有用。

于 2017-08-08T16:11:22.957 回答