# 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.
- Sometimes we may need to display quick results as user types in the input field.
Let's see, how we usually write code to achieve the desired result.
```html
Debouncing
```
```js
let count = 0;
function search(query){
// some api call
console.log("result",count++)
}
document.querySelector(".search").addEventListener("input",(e)=>{
search(e.target.value);
})
```
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**?
[JavaScript is a synchronous single-threaded language.](https://aamchora.hashnode.dev/what-exactly-javascript-is) 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.
**But wait ...**
How do we prevent unnecessary function calls to improve performance?
Here, the concept of **debouncing** kicks into the picture.
**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);
});
```
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/)