Understanding Debouncing: A Simple Explanation
Debouncing is a programming technique used to ensure that a function doesn’t get called too often within a short time. It helps us to consolidate multiple function calls into a single call after a specific time has passed.
Why Do We Need Debouncing?
Imagine you’re building a website with a search bar that fetches results as the user types. Without debouncing, every keystroke could send a request to the server. If a user types quickly, this could lead to a flood of requests, slowing down the server and the user experience.
With debouncing, you can say, “Wait a moment! Let’s not send a request with every keystroke. Let’s wait until the user pauses for a bit and then send one consolidated request.”
How Does Debouncing Work?
Debouncing, Here’s a basic way to understand it:
User Interaction: The user types something or clicks a button multiple times.
Set a Timer: Instead of reacting immediately, we start a timer.
Check for More Interactions: If the user interacts again before the timer runs out, we reset the timer.
React When Timer Ends: If the timer runs out without any more interactions, we call the function.
In JavaScript, you can implement debouncing using the setTimeout and clearTimeout functions.
Understanding and using debouncing can help you build more responsive and user-friendly applications, making sure that you catch the important actions without getting lost in the noise of rapid, successive inputs. It’s a powerful tool in the programmer’s toolkit, translating the chaos of rapid interactions into meaningful, manageable responses.
Debounce Function
1. Defining the Debounce Function:
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
debounce is a higher-order function that takes two parameters: func (the function you want to debounce) and wait (the amount of time in milliseconds that you want to wait before calling func).
1. Inside debounce, the variable timeout is defined to store the timer ID from setTimeout.
2. The function returns a new function that accepts any number of arguments (…args).
2. The Returned Function:
1. const context = this; captures the context (i.e., the value of this) at the time the debounced function is called. It ensures that the original this context is preserved when the debounced function is finally executed.
2. clearTimeout(timeout); ensures that any existing timeout is cleared. If the user keeps interacting, the timer keeps getting reset.
3. timeout = setTimeout(…, wait); sets up a new timer to call func after the specified wait time.
4. func.apply(context, args) ensures that when the function is called, it is called with the original this context and any arguments passed to the debounced function.
Implementing the Debounced Function
3. Defining the Debounced Function:
console.log(e.target.value, "call after debounce");
}, 1000);
1. You’re defining a function that takes an event e and logs the value of the target element, along with the string “call after debounce.”
2. This function is passed to the debounce function, along with a wait time of 1000 milliseconds, creating a debounced version of the function.
4. Adding the Event Listener:
searchEle.addEventListener('keyup', debouncedFunction)
1. You’re getting an element with the ID ‘search’ (presumably an input box) and storing it in the variable searchEle.
2. You’re then attaching a keyup event listener to this element and associating it with the debouncedFunction.
Summary
This entire code ensures that when a user is typing into an input box with the ID ‘search’, the logging function won’t be called immediately upon each key press. Instead, it will wait until there’s been a pause of 1000 milliseconds (or 1 second) since the last key press, and only then call the function.
Full Source Code
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
let debouncedFunction = debounce( function(e) {
console.log(e.target.value, "call after debounce");
}, 1000);
let searchEle = document.getElementById('search');
searchEle.addEventListener('keyup', debouncedFunction)
</script>
