Skip to main content Skip to secondary navigation Accessibility Feedback

Event listener performance with vanilla JS

Events like scroll and resize can cause huge performance issues on certain browsers. Paul Irish explains:

If you’ve ever attached an event handler to the window’s resize event, you have probably noticed that while Firefox fires the event slow and sensibly, IE and Webkit go totally spastic.

Debouncing is a way of forcing an event listener to wait a certain period of time before firing again. To use this approach, we’ll setup a timeout element. This is used as a counter to tell us how long it’s been since the event was last run.

When our event fires, if timeout has no value, we’ll assign a setTimeout function that expires after 66ms and contains our the methods we want to run on the event.

If it’s been less than 66ms from when the last event ran, nothing else will happen. (Learn why I use 66ms.)

// Setup a timer
var timeout;

// Listen for resize events
window.addEventListener('resize', function ( event ) {
    console.log( 'no debounce' );

    // If timer is null, reset it to 66ms and run your functions.
    // Otherwise, wait until timer is cleared
    if ( !timeout ) {
        timeout = setTimeout(function() {

            // Reset timeout
            timeout = null;

            // Run our resize functions
            console.log( 'debounced' );

        }, 66);
    }
}, false);

To see that in action, copy/paste that into the console on this page using Chrome or Safari, then resize the window.


Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips