What is the average rate at which the window.resize event fires?

Question

I'm working with the window.resize event and I found an issue that I was not expecting.
See the following code:

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

Or

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

Using either of the snippets above, I can only get the "doSomething" function to run if I manually and slowly (pixel by pixel) resize the window to make sure that it hits the desired pixel width.
If I rapidly resize the window the function does not run. It is as if the resize occured too quickly and javascript did not have enough time to evaluate the window's width.

So, is there a particular rate at which the resize event fires?

Thanks

Answer 1

There really is no such thing as an "average rate" because how fast these events occur is entirely dependent upon local circumstances (more explained on this below). And, it wouldn't be something you could rely on for your coding either. Instead, you need to code your solution differently to look for the size to cross some threshold (greater than or less than some trigger value) rather than be equal to some specific value.

The browser has some optimizations for certain types of user initiated events that can occur rapidly such as mouse move events, scrolling events and resize events. This is done to prevent large amounts of (usually unnecessary) events from piling up in the queue waiting to be processed and then for it to take minutes for the host javascript to process all those events.

As such, when you process such an event, only the latest position is reported, not all the in-between positions. So, you simply cannot write code like you are writing expecting to see an exact width that the user resizes through.

How many of these events there are depends entirely upon how fast you process each event and how fast the host computer is. The faster both are, the more of these events you will see, the slower you take to process a given event, the fewer events you will see. There is no "average" because it's entirely dependent upon the situation.

Usually, what one would do is to code for when a size exceeds or crosses a certain value rather than exactly when it equals a certain value.

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

---

FYI, in some cases, what you really want to know is when is the user done resizing or done scrolling (or has paused their movement) and you specifically don't want to process all the intermediate events. That is often done with a short timer as you can see illustrated here (this shows a scroll event, but the concept would be the same for a resize event):

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

Answer 2

window.resize does not fire at rate of $(window).width()++ pixels like you might think it would, it's actually kind of sporatic. You need a range between two numbers basically.

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

With this script you'll see the numbers go something like 1200,1205,1214,1216,1221,1224,1228,1229 and ect.

So your function might look like:

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