DEV Community

technikhil314
technikhil314

Posted on

Debounce and throttle simplified

#javascript #webdev

I was trying to create my own implementation of debounce and throttle. Yes just for fun.
and I came up with very simplified implementation that anyone can follow just by taking a look at the code.

You can play with the demo here

Hope you like it.

Throttle 

function throttle(fun, timeduration) {
    let shouldCall = true;
    return (...args) => {
        if (shouldCall) {
            shouldCall = false;
            fun(...args);
            setTimeout(() => {
                shouldCall = true;
            }, timeduration)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Debounce 

function debounce(fun, timeduration) {
    let lastTimeoutId = 0
    return (...args) => {
        if (lastTimeoutId) {
            clearTimeout(lastTimeoutId);
        }
        lastTimeoutId = setTimeout(() => {
            fun(...args);
        }, timeduration)
    }
}
Enter fullscreen mode Exit fullscreen mode

How to use it 

function showValue(val) {
    console.log(val)
}

const throttleInput = throttle(showValue, 500);

const debouncedInput = debounce(showValue, 500);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

amitkumar13 profile image

Memory Leak Detection in React Native with LeakCanary

Amit Kumar -

whiskeygerman profile image

Web canvas with generative neural networks with elements of visual programming.

German Whiskey -

siisee11 profile image

Langgraph - Human In the Loop

Jaeyoun Nam -

chintanonweb profile image

Step-by-Step Guide to Using React Components as Props Like a Pro

chintanonweb -