What are debouncing and throttling in JavaScript?

What are debouncing and throttling in JavaScript?

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

Can you provide code examples for both?

Sure! Here's a simple example of debouncing:

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

And for throttling:

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));
        }
    };
}

How do I use these functions in my project?

You can use these functions by wrapping the event handler functions you want to control. For example, if you want to debounce a search input:

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
    console.log('Searching for:', this.value);
}, 300));