Debouncing & Throttling in Node / JS

Debounce and other rate-limiting functions are an important part of programming. Especially for UI where excessive or costly events can cause performance issues e.g. scrolling, clicks, mouse movements, network requests etc.

Here are some visual examples of debouncing and rate-limiting functions.

No debounce, one click = one increment. Just for comparison.

Increments once per time period, subsequent presses reset the timer.

see code

Same as debounce, but takes the leading event as opposed to trailing.

see code

Throttles events to 1 per time period, discards intermediates.

see code

Queues events, delays and emits them at a regular interval.

see code

Code examples

Debounce

The debounce function suppresses repetitions that occur within a defined timeframe. All of the following functions make use of a javascript closure.

const debounce = (func, timeout) => {
    let timer;
    return (...args: any) => {
        clearTimeout(timer);
        timer = setTimeout(() => { func.apply(null, args) }, timeout);
    }
}

Debounce (leading)

This works the same, but takes the leading event.

const debounceLeading = (func, timeout) => {
    let timer;
    return (...args) => {
        if (!timer) {
            func.apply(null, args);
        }
        clearTimeout(timer);        
        timer = setTimeout(() => {
            timer = undefined;
        }, timeout);
    } 
}

Throttling

One event per time period, excess events are dropped.

const throttle = (func, timeout) => {
    let timer;
    return (...args) => {
        if (timer) return;
        func.apply(null, args);
        timer = setTimeout(() => {
            timer = undefined;
        }, timeout)   
    }
}

Throttled Queue

Events are queued and emitted at an interval.

const throttledQueue = (func, timeout) => {
    let items = [];
    let interval;
    return (...args) => {
        items.push(args);
        if (!interval) {
            interval = setInterval(() => {
                if (items.length) {
                    func.call(null, items.pop());
                } else {
                    clearInterval(interval);
                    interval = undefined;
                }
            }, timeout)
        }
    }  
}

Usage

See below for examples of how to use these functions or skip to React

Vanilla JS

HTML

<button id="theButton">Click me!</button>
<div>Clicks registered: <span id="clicksDisplay">0</span></div>

JS

const button = document.getElementById('theButton');
const clicksDisplay = document.getElementById('clicksDisplay');
 
let clicks = 0;
 
const handleClick = throttle((event) => {
  
  clicks++;
  console.log(`click event #${clicks}`);
  clicksDisplay.innerText = clicks;
 
}, 1000);
 
button.addEventListener("click", handleClick);

React

Be sure to add the useMemo hook to maintain a constant reference.

JS

const [clicks, setClicks] = useState(0);
 
const handleClick = useMemo(() => throttle((event) => {
        // the click event can be used if needed
        console.log(`click event from button ${event.target.innerText}`);
        setClicks(clicks => clicks + 1)
    }, 1000)
, [])

JSX

<button onClick={handleClick}>Click Me!</button>
<div>Total clicks: {clicks}</div>