Debouncing is a best-practice technique that enhances the user experience of frontend applications and optimizes performance.
It is typically used in applications that instantaneously query a database whenever an input field recieves a value.
In applications that list matched records as a user types into an input field(e.g amazon or jumia product search), the database usually gets queried with each keystrike, and this may lead to redundant API calls, ultimately affecting performance and leading to a terrible user experience.
//Queries the dataset without debounce functionality
const queryDatasetWithoutDebounce = (query) => {
if (query.trim() == "") return;
//Executes this whenever the user strikes a key
const matchedResults = products.filter((eachName) =>
eachName.toLowerCase().includes(query.toLowerCase())
);
console.log(
`Dataset queried. \nResults: ${
matchedResults.length > 0 ? matchedResults : "No match."
}`
);
};
The idea is to infuse a pause with each keystrike, and only make queries after a few specified seconds. If typing continues before the pause-time elapses, the timer gets reset. The database is only queried after the pause-time elapses.
//Stores debounce timer id
let debounceTimer;
//Queries the dataset with debounce functionality
const queryDatasetWithDebounce = (query) => {
//Doesn't execute an empty query
if (query.trim() === "") return;
//Resets timer on every key strike
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
//Executes this after pause-time elapses
const matchedResults = products.filter((eachName) =>
eachName.toLowerCase().includes(query.toLowerCase())
);
console.log(
`Dataset queried. \nResults: ${
matchedResults.length > 0 ? matchedResults : "No match."
}`
);
}, 1500);//Pause time is 1.5s
};
This mechanism is known to effectively curb performance bottlenecks caused by redundant resource queries.
A lot of libraries are available to achieve this, however i have written this from scratch using the setTimeout() function.