What is the difference between debouncing and throttling in JavaScript?

What is the difference between debouncing and throttling in JavaScript?

Debouncing and throttling are both techniques to control the rate of function execution. Debouncing ensures that a function is only called after a certain period of inactivity, while throttling ensures that a function is called at most once in a specified time interval.

Can you give me an example of when to use debouncing?

Sure! Debouncing is useful in scenarios like handling window resizing or keypress events in a search input, where you want to wait until the user has stopped typing before making an API call.

And what about throttling? When should I use that?

Throttling is ideal for scenarios like scrolling or resizing events where you want to limit the number of times a function is executed over time, ensuring it runs at regular intervals.

Can you show me some code examples for both?

Absolutely! Here's a simple debounce function:

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

And a throttle function:

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}