A JavaScript resizeDone Event for jQuery

If you have ever handled a resize event in JavaScript, you will have noticed that when a user manually resizes their browser window by dragging the edges… you get a lot of events. This is because the resize event fires constantly as the user resizes the window.

$window.on('resize', function () {
    // Your code gets called A LOT!
});

In almost all cases, you would rather subscribe to a “resizeDone” event, that only raises when the resize has finished.

The following jQuery example shows a lightweight resize listener that reduces the many resize events down to a single resizeDone event.

$window = $(window);
var resizeTimer;
$window.on('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        $window.trigger('resizeDone');
    }, 250);
});

You can now update your code to listen for the resizeDone event…

$window.on('resizeDone', function () {
    // Your code gets called once
});