如何等待“调整大小”事件的“结束”,然后才执行操作?

IT技术 javascript jquery html resize jquery-events
2021-01-17 12:49:13

所以我目前使用类似的东西:

$(window).resize(function(){resizedw();});

但是在调整大小的过程中,这会被多次调用。是否可以在事件结束时捕获事件?

6个回答

您可以使用setTimeout()clearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

jsfiddle上的代码示例

@MichaelHaren 由于重新调整大小的句柄通常在 之外$(document),鼠标检测将仅限于运行 Microsoft Windows 及其 Internet Explorer 易受攻击版本的用户:iedataleak.spider.io/demo
2021-03-22 12:49:13
我认为真正改善这一点的唯一方法是检测鼠标移动。不过,我怀疑深入研究它不会有回报。
2021-03-27 12:49:13
这仅在调整大小在一秒钟内完成时才有效吗?当我尝试使用它时,我的功能正在触发(虽然我的窗口调整速度很慢)
2021-03-29 12:49:13
这是debounce概念的一个非常简单的实现unscriptable.com/2009/03/20/debouncing-javascript-methods)。Paul Irish(和其他人)提出了一个更有效的解决方案,它不处理“不必要的”调整大小事件:paulirish.com/2009/throttled-smartresize-jquery-event-handler
2021-04-01 12:49:13
这是一个很好的答案。它做我推荐的插件所做的,只是没有插件。
2021-04-04 12:49:13

我对以下建议很幸运:http : //forum.jquery.com/topic/the-resizeend-event

这是代码,因此您不必仔细阅读他的帖子的链接和来源:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

感谢 sime.vidas 的代码!

@elundmark 或使用 + 操作。rtime: Date; .... if (+new Date() - +rtime < delta)并且在打字稿中 resizeend 函数应该是这样的箭头函数resizeend=()=>因为在 resizeend 函数中,this引用了 window 对象。
2021-03-18 12:49:13
人们可能希望将 Date 更改为类似的内容new Date(-1E12)- 即 JSLint 警告使用00.
2021-03-20 12:49:13
感谢 elundmark。我已将日期实例化切换为使用单个 0;希望这不会产生投诉。
2021-04-07 12:49:13

这是我根据@Mark Coleman 的回答编写的代码:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

谢谢马克!

不错的做法。这里也提到了不同之处在于没有对超级变量窗口进行修改。
2021-03-11 12:49:13
最好的解决方案。
2021-03-13 12:49:13
@AlwinKesler - 在您的示例中,变量resizeTimer是一个全局变量,这意味着它没有定义 the window,所以它与此处完全相同,只有这个示例更好,因为您不需要在外部定义变量。并且将此变量添加到window对象也是有意义的,因为这是事件侦听器绑定到的对象。
2021-03-15 12:49:13
谢谢!只是想补充一点,在某些情况下,在回调中执行某些任务需要更长的时间间隔。例如,在我的情况下,250 不起作用,但 700 效果很好。
2021-03-15 12:49:13

Internet Explorer 提供了一个resizeEnd事件。在您调整大小时,其他浏览器会多次触发调整大小事件。

这里还有其他很棒的答案,展示了如何使用 setTimeout 和.throttle.debounce方法来自 lodash 和下划线,所以我会提到 Ben Alman 的油门去抖动 jQuery 插件,它可以完成你想要的。

假设您有一个要在调整大小后触发的函数:

function onResize() {
  console.log("Resize just happened!");
};

Throttle 示例
在下面的示例中,onResize()在窗口大小调整期间将仅每 250 毫秒调用一次。

$(window).resize( $.throttle( 250, onResize) );

Debounce 示例
在下面的示例中,onResize()只会在窗口大小调整操作结束时调用一次。这与@Mark 在他的回答中给出的结果相同。

$(window).resize( $.debounce( 250, onResize) );
是的,这个答案是 5 年前写的。自 jQuery 插件时代以来发生了很多事情。这里也是一个独立的去抖动函数davidwalsh.name/javascript-debounce-function
2021-03-12 12:49:13
Lodash 在这里也很有用,它也有 _.throttle 和 _.debounce 方法。我认为与上述接受的示例相比,去抖动是一种更好的方法。
2021-03-13 12:49:13
值得一提的是也应该进行审计。它通过额外的扭曲来完成 debounce 所做的事情:它将确保在每 X ms 之间触发一次,这在“长时间”调整大小期间非常棒,因为它保证网页即使在调整大小期间也能响应(neato!)
2021-03-13 12:49:13

有一个使用Underscore.js的优雅解决方案因此,如果您在项目中使用它,您可以执行以下操作 -

$( window ).resize( _.debounce( resizedw, 500 ) );

这应该足够了 :) 但是,如果您有兴趣阅读更多相关信息,可以查看我的博客文章 - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore -去抖动(死链)

只是想补充一点,lodash也提供这个
2021-03-11 12:49:13