This website uses cookies to enhance the user experience

Implementing Debounce in JavaScript

Share:

Web DevelopmentJavaScript

Hello,
I need to implement debounce in JavaScript to optimize an input field that makes API calls on user keystrokes. Can someone explain how debounce works and provide a simple implementation example?

Emily Parker

9 months ago

1 Response

Hide Responses

William Turner

9 months ago

Hello,
Debouncing limits the rate at which a function can fire. Here’s a simple implementation:

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

// Usage
const handleInput = debounce(() => {
    console.log('API call made');
}, 300);

document.getElementById('inputField').addEventListener('input', handleInput);

This code debounces the handleInput function, so it only executes after 300 milliseconds have passed since the last event.

0