如何避免由其他事件触发的多次窗口大小调整

how to avoid windows resize triggering multiple times which is triggered by other events

本文关键字：窗口大小 调整 何避免 其他 事件      更新时间：2023-09-26

我发现在设备方向更改期间，页面中的调整大小代码多次被绊倒。怀疑这是由于页面模式从横向更改为纵向期间发生的其他事件，例如页面滚动，反之亦然。我需要在窗口调整大小中编写逻辑，但它的调用不止一次。有什么方法可以避免其他事件影响窗口大小调整

窗口大小调整事件在每次窗口大小调整期间触发多次。正如Rory McCrossan在上面指出的那样，事件每改变一个像素就会触发一次。

一个选项是使用 debounce 函数，例如 David Walsh 描述的函数：

https://davidwalsh.name/javascript-debounce-function

这是另一篇有用的文章，描述了限制和去抖之间的区别：

https://css-tricks.com/the-difference-between-throttling-and-debouncing/

最后，您可以使用不太优雅（但同样有效）的方法，即使用全局变量来跟踪何时希望允许触发 resize 事件。

var ok_to_resize=true;
$(function(){
    $(window).resize(function(){
        if (ok_to_resize){
            //run your resize code
            ok_to_resize = false;
            setTimeout(function(){
                ok_to_resize = true;
            },500);
        }
    }); //END window.resize
}); //END document.ready
相关文章：