Sanjit Sarkar's blog

Deep dive into Debouncing in Javascript

Sanjit Sarkar's photo
Sanjit Sarkar
·

3 min read

Deep dive into Debouncing in Javascript

Table of contents

Introduction

Maybe you are wondering how e-commerce and social media sites show us suggestions while we are typing something into the search bar and how they handle the enormous amount of requests users make with each keystroke. So to fix the overflooding of API calls on each keystroke, they only make API calls when users pause while typing. Thus to implement this technique Debouncing comes into the picture. Debouncing is not only limited to Javascript, it can be applied to various programming languages and fields like game development, web development, and app development.

Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it hampers the performance of the web page. In other words, it limits the rate at which a function gets invoked

Implementation of debouncing in Javascript

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
const searchProducts = debounce((e)=> {
//call API to search products 
const products = await getProducts(e.target.value);
return products;
})
  • First of all, we have to make a function called debounce that accepts a callback function and timeout - (minimum duration after which the function will be invoked). By default, timer is set to 300 i.e. 300 milliseconds.
  • After this, we have to initialize a variable called timer which will be used to store the setTimeout function reference as we will be needed to clear the setTimeout timer after a certain delay of timeout.
  • This function is returning an anonymous function with the argument ...args which is used for spreading out all the arguments we pass into this function. You can refer to this MDN article for understanding the spread operator.
  • If the timer is not undefined then it will clear the timeout with clearTimeout function but on the first call of this function, it will ignore this statement as it will be undefined initially.
  • With the help of the browser's setTimeout function we are delaying the call of the callback function by a certain duration of timeout and its reference will be stored into timer variable and with the help of functions apply method we will pass the context of its outer function along with the provided arguments.
  • We are passing the searchProducts function as a callback function to debounce the function call.

    How to apply this debounce method on HTML

<input type="search" onchange="searchProducts">

So, on every keystroke on the input field, it will invoke the searchProducts function and fetch the products but only if we pause for a minimum duration of 300 milliseconds.

Applications of Debouncing

  • Auto suggestions on the search bar.
  • Auto saving values of input fields.
  • For eliminating double-button clicks.

Conclusion

In this article, we learnt about the debouncing and its implementation. It may be sometimes confusing to choose between debouncing and throttling. Choose debouncing for the event which will trigger not more than 10 events per second like input events and throttling for the events that occur too often i.e. more than 10 events per second like window scrolling, drawing on canvas, and window resizing events as the events will be triggered too often.

Thank you for Reading...

References:

debouncingJavaScripteventsInputthrottling