Skip to content

Rainbow
Apps

Rainbow
Apps

Debounce vs throttle

Before focusing on debounce and throttle methods, it's important to know the setTimeout function.

setTimeout

The setTimeout function allow us to execute a callback after a specific timer. The first parameter is the callback to execute, and the second one is the minimum duration when the callback has to be executed:

// Duration in milliseconds
setTimeout(callbackToExecute, waitInMilliseconds);

As you may have noticed, I mentioned that it's the minimum duration. Indeed if the "browser" is busy with other tasks, this callback will be executed when the browser will be idle, after the duration.

Here is an example usage:

function methodToDelay() {
    console.log('I will be displayed after at least 1 second');
}

setTimeout(methodToDelay, 1000);

debounce

The debounce function does not execute a callback as soon as the callback is called under a specified duration time.

For example, if we want to implement an input field that makes XHR calls to a backend API, to directly filter from the database. From scratch, a call will be made for each keystroke. Most of the time, the user will type multiple letter that will result in multiple calls, but only the last will be useful. debouncing the callback will make the API call only when the user will not have type a character in less than 250ms for example.

The implementation is based on setTimeout. The execution of the callback is delayed of a duration t, and if we want to execute again the callback before this period of time, we will reset the timer.

function debounce(callback, waitTime) {
    let timeoutId;

    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            callback.apply(this, arguments);
        }, waitTime);
    }
}

throttle

The throttle function allow us to execute a callback periodically as soon this one is called.

For example, if we want to execute a process when the user is scrolling, if we only do a simple handler callback on event scroll, this one will be called hundreds of times or over. For performances, it's not the best. So we will use a throttled method to executes it every 500ms for example and gives feedback to user (if it results to a visual process).

export default function throttle(callback, waitTime) {
  let firstCallMade = false;
  let recalled = false;
  let latestContext;
  let latestArguments;

  return function () {
    function recall() {
      firstCallMade = true;
      setTimeout(() => {
        // If the function has been recalled, let's reexecute it
        if (recalled) {
          callback.apply(latestContext, latestArguments);
          recall();
          latestContext = undefined;
          latestArguments = undefined;
          recalled = false;
        } else {
          firstCallMade = false
        }
      }, waitTime);
    }

    if (!firstCallMade) {
      // It's the first call, let's execute the function
      callback.apply(this, arguments);
      recall();
    } else {
      // The callaback has been already called once
      recalled = true;
      latestContext = this;
      latestArguments = arguments;
    }
  };
}

Comparison between both

I have coded a little codesandbox to see the difference between this 2 methods. In this one there are:

  • the method which is immediately called
  • the method which is debounced
  • the method which is throttled

Let's go check this here.

09-02-2021

Rainbow Apps

Get it on Google Play

© Copyright 2021 Rainbow Apps. All rights reserved.

Rainbow Apps

© Copyright 2021 Rainbow Apps.
All rights reserved.

Get Numbersion app

Get it on Google Play

Follow me