0

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

jnkrois
  • 658
  • 1
  • 12
  • 30
  • 1
    The average rate is *"continuously"*, but you can't rely on the size ever hitting a certain number like that, you should be using `>` and `<` instead – adeneo Jun 05 '15 at 19:20
  • Thanks adeneo, I thought about using > and <, but what I want to do is avoid running the function more than it is needed. And I'd have to use a very small range to make it effective, and I run the risk of missing the mark. From the tests I've performed, I've seen the resize fire at 1200px and not fire again until 1500px, depending on how quickly the window was resized. – jnkrois Jun 05 '15 at 19:28
  • 1
    Then you need to debounce it – adeneo Jun 05 '15 at 19:32

2 Answers2

4

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?

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thank you jfriend00. Your answer is very informative. – jnkrois Jun 05 '15 at 19:31
  • 1
    @jnkrois - I read in your comments that you're trying to not run your function as often. If that's the case, then you may want to use a timer to detect when the user appears to have stopped moving the resize. You can see how to do that in the linked answer I added to the end of this answer. – jfriend00 Jun 05 '15 at 19:34
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();
   }
});
Michael J. Calkins
  • 32,082
  • 15
  • 62
  • 91