javascript - Difference Between throttling and debouncing a function

Question

Can anyone give me a in-simple-words explanation about the difference between throttling and debouncing a function for rate-limiting purposes.

To me both seems to do the same the thing. I have checked these two blogs to find out :

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 1

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.