How to Implement a Debounce in JavaScript to Optimize Event Handling

// Debounce function to optimize frequent events
function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

// Using debounce on an input event
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", debounce((event) => {
    console.log("Searching:", event.target.value);
}, 500));

Explanation:

• The debounce function takes another function (func) and a delay (delay).
• If the user keeps typing, the timer resets.
• The function executes only after the user stops typing for delay milliseconds.
• In this example, it's applied to a search field (input), preventing unnecessary API calls while the user types.

This pattern is extremely useful for improving performance in applications with frequent event triggers. 🚀