Home / Tutorials / JavaScript Debounce Function
debounce

JavaScript Debounce Function

To optimize existing code, there is a biggest mistake I have seen is the absence of the debounce function.  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.

For those of you who don’t know what a debounce function does, it limits the rate at which a function can fire. A quick example:  you have a resize listener on the window which does some element dimension calculations and (possibly)  repositions a few elements.  That isn’t a heavy task in itself but being repeatedly fired after numerous resizes will really slow your site down.  Why not limit the rate at which the function can fire?

Here’s the basic JavaScript debounce function (as taken from Underscore.js):

You’ll pass the debounce function the function to execute and the fire rate limit in milliseconds.

Here’s an example usage:

The function above will only fire once every quarter of a second instead of as quickly as it’s triggered; an incredible performance boost in some cases.

About cmadmin

Web Developer & Designer | Android App Developer

Leave a Reply

Your email address will not be published. Required fields are marked *

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH