Throttle vs. Debounce — The difference and when to use what

This is a question I think every developer will run into at least once in their career. I’ve had it multiple times and I can even still be in doubt about when to use what.

I will try to keep the explanation as short as possible and when you are done reading, it is clear to you what the difference is.

Throttle

A throttle function is a function that will take action with intervals. One of the most common situations using a Throttle is handling scrolling.

Add a scroll event to your window in the console while you’re in this article.

window.addEventListener('scroll', () => console.log(document.documentElement.scrollTop))

Now scroll and you will see a number change very(!) fast.

Imagine if you are making a GET request this many times, while scrolling. It could be, you want to get the next 20 products, just before you hit the bottom of the page, so your customers, won’t wait seconds for fetching 1000 products.

This is where Throttle comes in handy.

function throttle (callback, limit) {
    let waiting = false;      
    return function () {        
        if (!waiting) {         
            callback.apply(this, arguments); 
            waiting = true;                  
            setTimeout(function () {         
                waiting = false;             
            }, limit);
        }
    }
}
const everySecond = 1000; // ms
window.addEventListener('scroll', throttle(() => console.log(document.documentElement.scrollTop), everySecond))

Before testing, refresh this page, just to make sure it is not using the previous scroll event.

You will now see the console.log being fired every second.

Debounce

Now to the Debounce and the difference, for that matter.

We can actually test it with the same example above.

You did try to run

window.addEventListener('scroll', () => console.log(document.documentElement.scrollTop))

In the console and saw how fast it was logging. While throttle will fire the function every second (in our example), a debounce function will fire after a certain amount of time.

Let’s make a simple debounce example.

function debounce (fn, wait) {
  let timeout = null;
  return function () {
    clearTimeout(timeout) 
    const args = arguments    
    timeout = setTimeout(function () {      
        fn.apply(this, args)    
      }, (wait))  
  }
}
const afterOneSecond = 1000; // ms
window.addEventListener('scroll', debounce(() => console.log(document.documentElement.scrollTop), afterOneSecond))

Now run this in the log. Scroll and then stop and wait a second (the delay in this example).

And 1 second after scrolling, the function is getting fired!

The first thought I get about when to use debounce is saving text while writing docs. Imagine you are at an exam and you are under time pressure for written documentation. You don’t want to spend time saving, and what if the wifi goes offline? Is all the documentation gone?

This is where debounce could be a great example. Because it helps you saving all the hard work. You will see this in Google Docs and pretty much every other online text editor.

Conclusion

You see the difference?

Throttle is running with intervals and debounce is running after delay.

I hope this article explained the difference well and it now makes sense when to use what.