Throttling And Debouncing Using JavaScript

Introduction 

In this article, I am going to explain the concepts of throttling and debouncing in JavaScript. Throttling and debouncing are two of the most important performance optimization concepts which are used in real-time applications.

Throttling

Throttling means executing the function at regular intervals, which means once the function is executed, it will start again only after a specified amount of time is over.

Debouncing

Debouncing means the function will execute when a user hasn't carried out an event in a specified amount of time.

Real-Time Scenario

The search option in an e-commerce website is the most appropriate real-time use case for throttling and debouncing. When we are typing the product name in the search box, it will hit the API and fetched the items based on input. In this case, if you are calling the API for each character entered in the search box then it will be affecting the performance of the search operation. How it will be resolved?! No curious. The throttling and debouncing come into the picture to resolve this performance issue.

For example, if the user wants to search "Samsung mobile" on the website. Instead of calling the API for each character entered in the search box, call the API when the user gives pause for some time period (example: 1000 ms) on typing in the search box. If the user gives pause for some time period (example: 1000 ms) after typing the word "Samsung" then, call the API with input is "Samsung" and display the search result related to "Samsung". Again user continues the typing and gives pause on the word after "Mobile" then now calls the API with input is "Samsung Mobile" and displays the search result related to "Samsung Mobile". This is called "Debouncing". The pause is called a cooling period.

let input = document.getElementById('search-box');
let debounceTimer;
let actualCount = 1,
    debounceCount = 1;
const search = (searchData) => {
    console.log(debounceCount++);
    console.log("Fetching Data ..");
}
const debounce = function(searchData, time) {
    console.log(actualCount++);
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        search(searchData);
    }, time);
}
input.addEventListener('input', (event) => {
    debounce(event.target.value, 1000);
});

For the above example, Call the API when entered the first letter 'S' and display the search result related to "S". After some particular time period (example: 2000 ms) again calls the API with search input is what are the characters entered in the search box (example: "Sams") and do it again until user finished the word. This is called "Throttling".

Example

The first API input is 'S'. After 2000 ms API input is 'Sams'. After 2000 ms API input is 'Samsung m'. After 2000 ms API input is 'Samsung mobile'. The input depends on the user typing speed in the search box during that interval time period.

let input = document.getElementById('search-box');
let throttleTimer;
let actualCount = 1,
    throttleCount = 1;
const search = (searchData) => {
    console.log(throttleCount++);
    console.log("Fetching Data ..");
}
const throttle = (searchData, time) => {
    console.log(actualCount++);
    if (throttleTimer) return;
    throttleTimer = true;
    setTimeout(() => {
        search(searchData);
        throttleTimer = false;
    }, time);
}
input.addEventListener("input", () => {
    throttle(event.target.value, 2000);
});

Hope you liked it. If you have any doubts or comments about this, please let me know in the comments.