Debouncing vs Throttling in JS

#webdev #javascript #beginners #programming

Ever experienced multiple API calls whenever you scroll in an application. Ever wondered how can we restrict this and make the necessary calls only when it is required. Though this continuously fetches the data for the user but all these calls are expensive. There could be some scenarios where you want to fetch continuous data from the server while other processes don't need this that much. Following are two ways through which we can restrict multiple API calls in JS.

Debounce

Debounce function limits the execution of a function call and waits for a certain amount of time before running it again. limiting the number of times the user can call a function attached to an event listener. It is a higher order function. this means a function which returns another function.
It delays the function invocation by a defined period of time to avoid unnecessary invocations. So, the function will only be invoked if no event is triggered within that time. If the user triggers a new event during that time, the time will be reset.

Usage of debouncing

Scroll event handling
Submit option in an auto submit feature
Resize event handling
Implementing suggestive text

Snippet

function debounce(callback, delay = 1000) {
  var time;

  return (...args) => {
    clearTimeout(time);
    time = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}

As we can observe, the debounce function acts as a wrapper for the callback function and ensures that it will be invoked after the delay. In this case, the default delay is 1,000 milliseconds.

Throttle

Throttling is a technique, to limit the execution of an event handler function, even when this event triggers continuously due to user actions. It is limiting the number of times a function gets invoked in a certain period of time. This helps in running the function at a constant and consistent rate. Contrary to debouncing where there is a delay in the call, it invokes the callback function at regular intervals as long as the event trigger is active.

Usage of throttling

throttling an API call
throttling mousemove or touchmove event handler
continuous user events like resizing and scrolling

Snippet

function throttle(callback, delay = 1000) {
  let shouldWait = false;

  return (...args) => {
    if (shouldWait) return;

    callback(...args);
    shouldWait = true;
    setTimeout(() => {
      shouldWait = false;
    }, delay);
  };
}

In debouncing, we implemented the debounce function as a wrapper of the callback function, since we delay the callback function invocation. But in throttle implementation, we immediately invoke the callback function if the shouldWait flag is false. Then, the setTimeout() function is used to update the flag value based on the delay we define.

Difference

Debounce monitors the time delay between user actions and only executes the callback function if the delay exceeds the time delay defined by the developer. So, continuous user actions can significantly delay the callback function’s execution if we use debounce.

On the other hand, throttle uses the time delay to execute the callback function at regular intervals until the event trigger is active. So, it does not delay the callback function execution for a significant period like debounce.