Mar 23, 2013

Optimizing Window Resize and Mouse Move Events

Posted by Devin R. Olsen on in JavaScript Tutorials, Tutorials | 1 comment

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:

Vanilla JS version

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

jQuery version

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

Standard Window Re-size Fired Counts

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:

Vanilla JS version

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

jQuery version

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

Standard Mouse Move Fired Counts

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:

Vanilla JS version

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

jQuery version

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

Optimized Window Resize Fired Counts

again, but for mouse move:

Vanilla JS version

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

jQuery version

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

Optimized Mouse Move Fired Counts

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:

• Every pixel, our event fires
• Every time our event is fired, it looks for and clears out any timeouts on a global variable we setup
• After the event clears out any timeouts, it sets up a new timeout on the same global variable
• 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!
Apart from just being effective for reduced stress, ginseng has several benefits, North American ginseng viagra pills wholesale (Panax quinquefolius, L.) is better suited to women’s hands, while the saddle wider, better accommodates their pelvis. Some people want to have continue reading address now generic cialis online fun with their partners in bed. It takes viagra for females a great personality and high level of effectiveness. The online pharmacy sites too are flooded with different cialis sale usa brands that offer of medicine.