JavaScript Throttle & Debounce Comparison

throttle-debounce-comparison.js

const throttle = (func, limit) => {
    let engaged = false;
    return function () {
        const args = arguments;
        const context = this;
        if (!engaged) {
            func.apply(context, args);
            engaged = true;
            setTimeout(() => engaged = false, limit);
        }
    }
}

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

const testThrottle = () => {
    console.log('throttle');
}

const testDebounce = () => {
    console.log('debounce');
}

const throttledFn = throttle(testThrottle, 500);
const debouncedFn = debounce(testDebounce, 1000);

throttledFn();
throttledFn(1);

setTimeout(() => throttledFn(), 600);
setTimeout(() => throttledFn(), 700);

const debounceInterval = setInterval(() => debouncedFn(), 950);

setTimeout(() => {
    clearInterval(debounceInterval);
}, 10000)