How do I implement debouncing in JavaScript?

How do I implement debouncing in JavaScript?

Debouncing is a technique used to limit the rate at which a function is executed. It ensures that a function is only called after a certain period of inactivity. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

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

const saveInput = debounce(() => {
    console.log('Input saved!');
}, 1000);

// Usage
inputElement.addEventListener('input', saveInput);

How does this code work?

The debounce function returns a new function that delays the execution of func until after delay milliseconds have passed since the last time it was invoked. This is useful for scenarios like input fields where you want to wait until the user has stopped typing.

Can I use this for window resizing events?

Absolutely! You can use the same debounce function to handle window resize events to improve performance by limiting how often the resize handler is called.