Difference Between throttling and debouncing a function

by

To put it in simple terms:

  • Throttling will delay executing a function. It will reduce the notifications of an event that fires multiple times.
  • Debouncing will bunch a series of sequential calls to a function into a single call to that function. It ensures that one notification is made for an event that fires multiple times.

You can visually see the difference here

If you have a function that gets called a lot – for example when a resize or mouse move event occurs, it can be called a lot of times. If you don’t want this behaviour, you can Throttle it so that the function is called at regular intervals. Debouncing will mean it is called at the end (or start) of a bunch of events.

More Related Contents:

  1. Javascript does not work
  2. How do I format a date in JavaScript?
  3. How do I check if an object has a specific property in JavaScript?
  4. jQuery click / toggle between two functions
  5. Force browser to download image files on click
  6. How can I count text lines inside an DOM element? Can I?
  7. In javascript, how do you search an array for a substring match
  8. Is there a way to make text unselectable on an HTML page? [duplicate]
  9. How to prevent your JavaScript code from being stolen, copied, and viewed? [closed]
  10. Remove querystring from URL
  11. JSON.stringify() array bizarreness with Prototype.js
  12. JavaScript : For loop with timeout
  13. JavaScript: undefined !== undefined?
  14. How can you sort an array without mutating the original array?
  15. JavaScript .replace only replaces first Match [duplicate]
  16. Why do arrow functions not have the arguments array? [duplicate]
  17. Why does changing one array alters the other?
  18. How to detect right mouse click + paste using JavaScript?
  19. Get content of a DIV using JavaScript
  20. Perform .join on value in array of objects
  21. JavaScript braces on new line or not? [closed]
  22. jQuery index() in vanilla javascript
  23. Is “Put Scripts at the Bottom” Correct? [closed]
  24. JavaScript only being called once in Squarespace
  25. Dynamically adding cases to a switch
  26. How to use React.forwardRef in a class based component?
  27. Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button
  28. split an array into two based on a index in javascript
  29. Can I add arbitrary properties to DOM objects?
  30. create-react-app is showing all my code in production, how to hide it?

Leave a Comment