Frontend jQuery

jQuery Debounce Functionality

Sometimes we need to run the functionalities after some delay not immediately. For example,

  • Send the search requests after a delay in the search form.
  • Show the announcement bar in some delay after the site is loaded.

There are several libraries to implement the Debounce functionality and we can use one of them in our development.

jQuery throttle / debounce library is one of them.
It allows us to rate-limit our functions in multiple useful ways. Passing a delay and callback to $.throttle returns a new function that will execute no more than once every delay milliseconds. Passing a delay and callback to $.debounce returns a new function that will execute only once, coalescing multiple sequential calls into a single execution at either the very beginning or end.

For sure, we can use the javascript setTimeout() functionality to fix the delay issue. But there are some special cases when it would be better for us to use the Debounce functionality rather than using setTimeout() functionality.

Example cases when we need to use the Debounce functionality:

  1. http://jsfiddle.net/cowboy/cTZJU/
  2. http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/
  3. https://css-tricks.com/debouncing-throttling-explained-examples/

You may also like...

Leave a Reply

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