How do I debounce events in JavaScript?

How do I debounce events in JavaScript?

Debouncing is a technique used to limit the rate at which a function is executed. In JavaScript, you can debounce events like scroll or resize to improve performance.

Can you show me an example of a debounce function?

Sure! Here's a simple debounce function:

function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

How would I use this debounce function with a scroll event?

You can use it like this:

window.addEventListener('scroll', debounce(() => {
    console.log('Scroll event debounced!');
}, 200));

What if I want to debounce multiple events?

You can create separate debounce functions for each event or reuse the same debounce function with different handlers. Just ensure the delay is appropriate for each event.