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.

// 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.