How to Improve performance of Javascript Applications with debouncing
Debouncing is a programming technique that ensures time-intensive tasks are not triggered too frequently, effectively controlling the rate at which a function is executed.
For example, suppose you have an application with a search functionality that calls an API every time a user types in the search box. In such as case, our application could benefit from debouncing to ensure that the API doesn’t call the API on every keystroke.
Let's see how we can implement it in JavaScript.
Here is our search input:
<input type="text" id="search" placeholder="Search..." />
When a user begins typing in the search box, an event listener detects each input change and triggers a function to fetch the results.
Let’s log the query value submitted by the user.
Here is the output
As you can see on every keystroke the function logs the value to the console.
If we were making an actual call to an API, it would have fetched 5 times for just a single search.
Since the function fires on every keystroke, it would continue making requests, which could lead to performance issues, especially on slow connections.
To minimize the number of API calls, you can implement a debouncing function that delays each request by a specified time, for example, 500 milliseconds.
If another input occurs before the delay period finishes, the timer resets, ensuring that only the final input triggers the API call, significantly reducing the frequency of requests.
Let’s add the debounce function
The debounce function takes a callback function and a time delay in milliseconds. It then returns a new function that accepts an unlimited number of arguments.
The returned function delays the execution of the callback function by the specified delay. In this case, we use 500 milliseconds.
After adding a debounce feature, the output, the fetchResults function doesn't log the value on every keystroke since the function is only called when the user pauses typing. This reduces unnecessary requests and improves performance.
Even with slow typing, the debouncing function slows down the execution of the query.
Conclusion
When implementing debouncing, it’s important to choose a time delay that is long enough to reduce unnecessary API calls but also short enough that it doesn’t affect the user experience
thanks! i didn't know that clearInterval clears timeouts as well 😄
is there a point you use .apply() instead of spread operator like:
```
return (...args) => {
clearTimeout(interval);
interval = setTimeout(() => func(...args), delay);
}
```
I love how EchoAPI allows for real-time API testing. It provides instant feedback, which is invaluable during development.