窗户的平均速度是多少?调整事件触发的大小

Question

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

$(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没有足够的时间来评估窗口的宽度。

那么，resize事件是否有一个特定的触发速率呢?

谢谢

Answer 1

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

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

因此，当您处理这样的事件时，只报告最新的位置，而不是所有中间的位置。因此，你不能简单地编写代码，因为你正在编写期望看到用户调整大小的精确宽度。

有多少这样的事件完全取决于你处理每个事件的速度和主机的速度。两者的速度越快，您将看到的事件就越多;处理给定事件的速度越慢，您将看到的事件就越少。没有"平均数"，因为它完全取决于情况。

通常情况下，我们要做的是在大小超过或超过某个值时进行编码，而不是在大小等于某个值时进行编码。

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

---

供参考，在某些情况下，你真正想知道的是用户什么时候完成了调整大小或完成了滚动(或暂停了他们的移动)，你特别不想处理所有的中间事件。这通常是通过一个短定时器完成的，如图所示(这里显示的是一个滚动事件，但其概念与一个调整大小事件相同):

处理$(window)的更有效的方法。滚动功能在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();
   }
});