Debounce

Medium Important

Prompt

Debouncing is a crucial concept used in JavaScript to optimize the performance of an application. In this challenge, your task is twofold:

• Part 1: Please provide a detailed explanation of what "debouncing" means in the context of JavaScript. Include an explanation of how and why it is useful in JavaScript applications.
• Part 2: Write a function called debounce in JavaScript.

Solution

Concept Explanation 🧠

Debouncing enforces that a function not be called again until certain amount of time has passed without it being called.

Let's consider, when you type into search input, there is a delay before the results appear. The debounce function delays the processing of the keyup event until user has stopped typing for a predetermined amount of time. This way we prevent the browser to process event on every keystroke, also we don't spam the API to get the results, basically we have grouped multiple sequential calls into single one.

If we would have not debounced the function which fire on every keystroke we would have end up making call to API on every keystroke.

Code Explanation 💻

• We are passing a function fn and a delay delay into the debounce function.
• timeout is the variable which we will use to keep track of the amount of time.
• If we are invoking function for the first time, our function will execute at the end of our delay.
• Now, if we invoke our function and invoke again before the end of our delay, the delay restarts and execution of our function fn gets postponed, this process keeps happening until we stop firing the function and our delay gets completed.