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();
    }
}

使用上面的任何一个片段，我只能得到＆＃34; doSomething＆＃34;如果我手动缓慢（逐个像素）调整窗口大小以确保它达到所需的像素宽度，则运行该函数。
如果我快速调整窗口大小，则该功能不会运行。就好像调整大小太快而且javascript没有足够的时间来评估窗口的宽度。

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

由于

Answer 1

实际上没有“平均费率”这样的东西，因为这些事件的发生速度完全取决于当地的情况（下面有更多解释）。并且，它也不是您可以依赖的编码。相反，您需要以不同的方式对解决方案进行编码，以查找大小超过某个阈值（大于或小于某个触发值）而不是等于某个特定值。

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

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

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

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

getComputedStyle

仅供参考，在某些情况下，您真正想知道的是用户何时完成调整大小或完成滚动（或暂停了他们的移动）并且您特别不希望处理所有中间事件。这通常是通过一个短计时器完成的，你可以看到这里所示（这显示了一个滚动事件，但对于resize事件的概念是相同的）：

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

Answer 2

window.resize不像你想象的那样以$(window).width()++像素的速度发射，它实际上是一种诡异。你基本上需要两个数字之间的范围。

$(window).resize(function(){
   var windowWidth = $(window).width();
   console.log(windowWidth); // This will show you exactly what your JS is receiving.
});

使用此脚本，您会看到数字类似于1200,1205,1214,1216,1221,1224,1228,1229等等。

所以你的功能可能如下：

$(window).resize(function(){
   var windowWidth = $(window).width();
   if (windowWidth > 1255 && windowWidth < 1275) {
       //doSomething();
   }
});

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

2 个答案: