leading edge, instead of the trailing. If `immediate` is passed, trigger the function on the However, if you want to have the resize propagated to child elements, you will need to propagate the event yourself. The function will be called after it stops being called for The already mentioned solutions above will work if all you want to do is resize the window and window only. Returns a function, that, as long as it continues to be invoked, will not Here's the basic JavaScript debounce function ( as taken from Underscore.js): Why not limit the rate at which the function can fire? That isn't a heavy task in itself but being repeatedly fired after numerous resizes will really slow your site down.

A quick example: you have a resize listener on the window which does some element dimension calculations and (possibly) repositions a few elements.

If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it bricks browser performance.įor those of you who don't know what a debounce function does, it limits the rate at which a function can fire. One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce function.

Javascript window resize