What is debouncing in JavaScript?
Tags: javascript, webdev, beginners, programming
Published: 2022-06-28 06:27:00

---
canonical_url: https://blog.aamchora.space/what-is-debouncing-in-javascript
---

While building an app using JavaScript. We may need to call the function many times to achieve the desired result.

Some examples are 
 
- While scrolling or resizing the screen you would want to compute something.
- Sometime we may need to display quick results as user types in the input field.

![google search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1mtgpuz1ztkqemb75lp.png)


Let's see, how we usually write code to achieve the desired result.


```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Debouncing</title>
    </head>
    <body>
        <input class="search" type="text" placeholder="search"/>
        <script src="index.js"></script>
    </body>
</html>

```

```js

let count = 0;
function search(query){
   // some api call
   console.log("result",count++)
}

document.querySelector(".search").addEventListener("input",(e)=>{
search(e.target.value);
})

```

![example one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orzvwjsqotqxzb01t664.png)


In the above example, If I search for a laptop, The function search will be called 6 times. Which is **an inefficient way** of calling a function. And it is **very expensive** for JavaScript. 


You must be wondering what do you mean by **expensive for JavaScript**?

![wondering man](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdu6hyncmawfej6l6gb4.gif)
 

[JavaScript is a synchronous single-threaded language.](https://dev.to/aamchora/what-exactly-javascript-is-14jo) Which means we have a single **callstack** to execute everything. And because it is single-threaded, we should not block the thread by calling functions unnecessary.

![understanding boy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pifqybnp073w5z95w3e.gif)
 

**But wait ...**

How do we prevent unnecessary function calls to improve performance?


![questioning man](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7arukhkqppyn1z255tvo.gif)
 

Here, the concept of **debouncing** kicks into the picture.

![Kicks in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zjp0k3rfstwb1q0iqry.gif)

**Debouncing** is a technique used to improve the browser's performance. It ensures that time-consuming tasks do not fire so often, In other words, it limits the rate at which a function gets invoked.

Let's re-write the above code using **Debouncing technique**.

```js

let count = 0;
function search(query){
   // some api call
   console.log("result",count++)
   
}

const magicFunction = debounce(search,300);

function debounce(func, delay){
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

document.querySelector(".search").addEventListener("input",(e)=>{
  magicFunction(e.target.value);
});

```

![example two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aigz2ova79mvebklrbnp.png)
 

The idea behind debouncing technique is that we **do not call function during the event** but after the event.


In the above example, We can clearly see.

**debounce** is a **higher order function(HOF)**. Which takes two parameters the first parameter will be a function and the second will be a delay.

If the delay between two keystrokes is less than 300ms, function will not execute and `setTimeout` will be destroyed. And if the delay is more than 300ms, then only function will execute.


_That's how we can implement the **debouncing technique** to **improve our app's performance**_

---


_**follow me for more such blog posts.**
Let me know if this blog was helpful._

[Twitter](https://twitter.com/AamChora) || [Linkedin](https://www.linkedin.com/in/hemendrakhatik/)