Debouncing in JavaScript

26 Jul, 2021
Debouncing in JavaScript is a practice used to improve browser performance. There might be some functionality in a web page which requires time-consuming computations. If such a method is invoked frequently, it might greatly affect the performance of the browser, as JavaScript is a single threaded language. Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which a function gets invoked.
<html> <body><button id="debounce">    Debounce</button><script>var button = document.getElementById("debounce");const debounce = (func, delay) => {    let debounceTimer    return function() {        const context = this        const args = arguments            clearTimeout(debounceTimer)                debounceTimer            = setTimeout(() => func.apply(context, args), delay)    }} button.addEventListener('click', debounce(function() {        alert("Hello\nNo matter how many times you" +            "click the debounce button, I get " +            "executed once every 3 seconds!!")                        }, 3000));</script></body></html>
Output: Alertbox after 3 seconds
Hello
No matter how many times you click the debounce button,
I get executed once every 3 seconds!!

Explanation:
The button is attached to an event listener that calls the debounce function. The debounce function is provided 2 parameters – a function and a Number.Declared a variable debounceTimer, which as the name suggests, is used to actually call the function, received as a parameter after an interval of ‘delay’ milliseconds.If the debounce button is clicked only once, the debounce function gets called after the delay. However, if the debounce button is clicked once, and again clicked prior to the end of the delay, the initial delay is cleared and a fresh delay timer is started. The clearTimeout function is being used to achieve it.
The general idea for debouncing is:1. Start with 0 timeout2. If the debounced function is called again, reset the timer to the specified delay3. In case of timeout, call the debounced functionThus every call to a debounce function, resets the timer and delays the call.
Application:Debouncing can be applied in implementing suggestive text, where we wait for the user to stop typing for a few seconds before suggesting the text. thus, on every keystroke, we wait for some seconds before giving out suggestions.Another application of debouncing is in content-loading webpages like Facebook and Twitter where the user keeps on scrolling. In these scenarios, if the scroll event is fired too frequently, there might be a performance impact, as it contains lots of videos and images. Thus the scroll event must make use of debouncing.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
JayantaTalukdar
javascript-functions
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?