Table of contents
Debounce which is somehow related to Throttling is a Higher Order Function (HOF) - A higher-order function, often known as a function that returns another function. Both Debounce and throttling are web performance-centered and frequent Javascript interview questions. In this article, we'll be focusing on Debounce and how to improve our web performance.
Debounce is basically preventing a lot of events from firing until the user stops initializing the action that calls the events.
Prerequisite
Basic knowledge of Javascript
Basic knowledge of HTML and its elements
Implementation
We'll create an HTML and Javascript file, for this, I will be working with an online code editor called Codesandbox which I find very easy to use you should check it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Debounce In Javascript</title>
</head>
<body>
<h1>Debounce in Javascript</h1>
<div>
<label for="debounce">Debounce Input:</label>
<input type="text" name="debounce" id="debounce" />
</div>
<div>
<span>Output:</span>
<span class="debounceOutput"></span>
</div>
<script src="./js/main.js"></script>
</body>
</html>
Inside our HTML file, we have an input element with an ID of debounce which will be used to reference our Input tag inside of our Javascript main.js file, we also have a span element with the class name of debounceOutput which will also be referenced in our Javascript file to output our input element values.
const debounce = document.querySelector("#debounce");
const debounceOutput = document.querySelector(".debounceOutput");
debounce.addEventListener("keyup", () => {
// attached an eventlistener to our debounce input element, on every keyup we want our input value rendered in our debounceOutput Element
debounceOutput.textContent = debounce.value;
});
Below is what we have at the moment without our Debounce logic, imagine firing a search request on every keyup 👹 scary don't do that.
Now let's introduce debounce logic "Drum roll !!!!!!!!!"
const debounce = document.querySelector("#debounce");
const debounceOutput = document.querySelector(".debounceOutput");
// Debounce logic
// Our debounceFunc function takes in two arguments namely func and delay
const debounceFunc = (func, delay) => {
let timeoutId;
return function (...args) {
if (timeoutId) {
// clear active setTimeout when there is a new keyup press
clearTimeout(timeoutId);
}
// and initialize a new setTimeout
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
};
debounce.addEventListener(
"keyup",
debounceFunc(() => {
debounceOutput.textContent = debounce.value;
}, 2000)
);
func - Is the function we want to be returned after the delay time have been exceeded.
delay - a number value used to indicate an active debounce
Our Final Result
Conclusion
Debounce logic can be useful when working with buttons, input, and events like a scroll.
I hope you find this helpful 😊.