javascript - window.resize 事件触发的平均速率是多少？

Question

我正在处理 window.resize 事件，但发现了一个我没有预料到的问题。
请看下面的代码:

$(window).resize(function(){
   var windowWidth = $(window).width();
   if(windowWidth == "1263"){
       //doSomething();
   }
});

或者

window.onresize = resizeTest;
function resizeTest(){
    var windowWidth = window.innerWidth;
    if(windowWidth === 1263){
        //doSomething();
    }
}

使用上面的任何一个片段，如果我手动缓慢(逐像素)调整窗口大小以确保它达到所需的像素宽度，我只能运行“doSomething”函数。
如果我快速调整窗口大小，该函数将不会运行。就好像调整大小发生得太快，而 JavaScript 没有足够的时间来评估窗口的宽度。

那么，调整大小事件的触发速度是否有特定的速率？

谢谢

Answer 1

确实不存在“平均速率”这样的东西，因为这些事件发生的速度完全取决于本地情况(下面将对此进行更多解释)。而且，它也不是您可以依赖的编码工具。相反，您需要以不同的方式对解决方案进行编码，以查找大小是否超过某个阈值(大于或小于某个触发值)，而不是等于某个特定值。

浏览器对某些类型的快速发生的用户启动事件进行了一些优化，例如鼠标移动事件、滚动事件和调整大小事件。这样做是为了防止大量(通常是不必要的)事件堆积在等待处理的队列中，然后主机 JavaScript 需要几分钟的时间来处理所有这些事件。

因此，当您处理此类事件时，仅报告最新位置，而不是所有中间位置。因此，您根本无法编写像希望看到用户调整大小的精确宽度那样的代码。

这些事件的数量完全取决于您处理每个事件的速度以及主机的速度。两者速度越快，您看到的事件就越多，处理给定事件的速度越慢，您看到的事件就越少。没有“平均值”，因为它完全取决于具体情况。

通常，人们会做的是在尺寸超过或超过某个值时进行编码，而不是在它等于某个值时进行编码。

$(window).resize(function(){
   var windowWidth = $(window).width();
   if(windowWidth >= 1263){
       //doSomething();
   }
});

<小时/>

仅供引用，在某些情况下，您真正​​想知道的是用户何时完成调整大小或完成滚动(或暂停其移动)，并且您特别不想处理所有中间事件。这通常是通过一个短计时器来完成的，正如您可以在此处看到的所示(这显示了一个滚动事件，但概念与调整大小事件相同):

More efficient way to handle $(window).scroll functions in jquery?