Debouncing and Throttling in JavaScript and implementation

Debouncing and throttling are techniques in JavaScript to optimize the application and browser performance. These are programming concept not provided by JavaScript directly.

Table of Contents

Debouncing:

Debouncing is the way to wait or delay the execution of function for a certain amount of time to execute function again. In other words, it limits the rate at which a function gets invoked.

Implementation of Debouncing:

Start with 0 timeout.
If the debounced function is called again, reset the timer to the specified delay.
In case of timeout, call the debounced function.

let debounce = function (func, delay) {
    let timer;
    return function (...args) {
        let context = this;
        clearTimeout(timer);
        timer = setTimeout(() => {
            // console.log('In the log of timeout')
            func.apply(context, args)
        }, delay);
    }
}

Throttling:

This is the technique which help to call a function after a fixed interval of time means it ignore all function call in between that time interval.

Throttling is a technique in which the attached function will be executed only once in a given time interval. No matter how many times the user fires the event, only the first fired event is executed immediately.

Implementation of Throttling:

let throtling = function (func, delay) {
    let isTriggered;
    return function (...args) {
        if (!isTriggered) {
            isTriggered = true;
            let context = this;
            // clearTimeout(timer);
            timer = setTimeout(() => {
                func.apply(context, args);
                isTriggered = false;
            }, delay);
        }
    }
}

Complete code:

<body>
  <button id="dbtn">Debouncing Button</button>
  <button id="tbtn">Throtling Button</button>
  <!-- <script src="debouncing_throtling.js"></script> -->
  <script>
    let debounce = function (func, delay) {
      let timer;
      return function (...args) {
        let context = this;
        clearTimeout(timer);
        timer = setTimeout(() => {
          // console.log('In the log of timeout')
          func.apply(context, args);
        }, delay);
      };
    };

    let throtling = function (func, delay) {
      let isTriggered;
      return function (...args) {
        if (!isTriggered) {
          isTriggered = true;
          let context = this;
          // clearTimeout(timer);
          timer = setTimeout(() => {
            func.apply(context, args);
            isTriggered = false;
          }, delay);
        }
      };
    };
    document.querySelector("#dbtn").addEventListener(
      "click",
      debounce(function () {
        console.info("Hey! It is debouncing", new Date().toUTCString());
      }, 3000)
    );
    document.querySelector("#tbtn").addEventListener(
      "click",
      throtling(function () {
        console.info("Hey! It is throtling", new Date().toUTCString());
      }, 3000)
    );
  </script>
</body>

Image Credit