Optimizing Window Resize and Mouse Move Events

Today, we will talk about the re-size and mouse move events. These two events indeed are very helpful, but can also be very costly on your site or web app. Let’s take a look at an example of re-size for say window.

$(window).bind('resize', function(){
    ... logic ...
});

If you resize your window right now, you will see how many times this event gets fired, or rather how many times the event is grabbing memory to perform our logic, and then releasing it. That’s right, every available screen pixel on your screen that you re-size over, is equal to how many times the above code logic gets fired. Now imagine if our logic was more complicated than a simple log, then you begin to see how these events can be expensive.

Here is another example, this time we use the mouse move event:

$(window).bind('mousemove', function(){
    ... logic ...
});

Again, every single pixel the mouse moves over is an execution of our above code and logic, not very efficient if you ask me. So how do we optimize this you ask?

First lets talk about what optimize really means; if for say, you have a need to indeed know the value of these events over pixel, then there is no optimization techniques to help you, however if you only need to know the resulting value of when either events are done, then you have lots of optimization room.

Using the setTimeout()  and clearTimeout() methods, we can wrap our logic under these events into a “waiting period” if you will, that wont perform it’s self until our set time has elapsed, like so:

$(window).bind('resize', function(){
    if(typeof sizewait != 'undefined'){
        clearTimeout(sizewait);
    }
    sizewait = setTimeout(function(){
        ... logic ...
    },200);
});

again, but for mouse move:

$(window).bind('mousemove', function(){
    if(typeof movewait != 'undefined'){
        clearTimeout(movewait);
    }
    movewait = setTimeout(function(){
        ... logic ...
    },200);
});

This is a little different, but the largest area of concern for us, is the use of the clearTimeout(); method. This will clear any previously setup setTimeouts() our event sets up while they iterate over each pixel. So, the first part of each event now has an “if condition”, that uses the typeof operator to ask our document if a global variable called “sizewait” or “movewait” is available, and if so, clears them out. Next, after we have found and cleared any previously timeouts, we re-associate a new timeout to the same global variable, and write our logic with in.

Notice, that when we setup the timeout again after clearing then, we set a number of 200 after the anonymous function? This 200 number represents 200 milliseconds, so 1000 would be a full second; feel free to play with these timeout numbers, but don’t set them too low other wise you are back to square one and having our logic ran every pixel iteration.

So just to be clear, this is now how the events work:

  1. • Every pixel, our event fires
  2. • Every time our event is fired, it looks for and clears out any timeouts on a global variable we setup
  3. • After the event clears out any timeouts, it sets up a new timeout on the same global variable
  4. • If user is done firing the event, then after X milliseconds (or however much you adjust you timeout too) the one remaining timeout in our global variable is executed.

I hope this helps people out there trying to cut off some memory in their pages or apps that happen to use these events.
Thanks!

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus