Learn Debounce and Throttle

Introduction

Debouncing and Throttling are great ways to not only improve your user experience but can also save you resources.

When working with data that changes frequently, it is a good idea to optimize the computation for speed and accuracy.
In this tutorial we are going to learn the difference between throttling and debouncing with a search input.

Debouncing and Throttling are actually ways to slow down but a function but they differ in the way the function is finally executed.

Debounce

Debounce checks to see if there has been a delay in the last time the function was called.
When the function is called the second time, it waits to see if there has been a delay since the last time the function was tried to be called.
It is going to wait for the specific delay and as long as nothing changed in the function and the function was not called again then the function will be allowed to run but if something changed or the function was called again then it will reset the timer and waits for a change.

Essentially Debounce waits until there has been at least a set period of time before it actually calls the function

Let's look at implementing a Debounce function

 // we want to make sure our debounce function is generic
function debounce(callback, delay = 1000) {
  let timeout 

 // allow the function to take in any number of arguments
  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout (() => {
      callback(...args)
   }, delay)
  }
}

With this implementation, the debounce function waits at least 1 second to see if there has been a change before running the callback function.

Throttle

On the other hand, what throttle does is - it says

Okay as soon as you make a change, I'm going to run the callback and after each delay is over I'm going to continuall run the callback based on whatever the last input was.

This is great when things are changing a lot and you want to send the request with the most recent result while running the callback at a specific interval.

A fitting example where throttling can be used is in scrolling and resizing a window

Let's look at implementing a Throttle function

function throttle (callback, delay = 1000){
  let shouldWait = false
  let waitingArgs
  const timeOutFunc = () => {
    if (waitingArgs == null){
      shouldWait = true
    } else {
      cb(...waitingAgs)
      waitingArgs = null 
      setTimeout(timeOutFunc, delay)
    } 
  }


  return (...args) => {
    if (shouldWait) {
      waitingArgs = args
      return
    }

    cb(...args)
    shouldWait = true    

    setTimeout(timeOutFunc, delay)
  }
}

Conclusion

The difference between debounce and throttle is debounce waits until there has been another delay before it runs but throttle runs immediately the function is called.
When throttle is in the waiting stage, the last call to the function is saved with its appropriate args and the callback is later ran with those args