DEV Community

loading...

Closures: Debouncing

steelvoltage profile image Brian Barbour ・2 min read

In the previous article in this series, we looked at a practical use of closures called memoization. In this post we're going to briefly look at closures in action through a debounce function.

A debounce delays the processing of a function for a certain amount of time. It can be very useful with things like forms, buttons, or mouse events--anytime there is a lot of user input possible. It can help prevent rapid fire re-rendering of the DOM by introducing a "cooldown" period, to use gaming terminology.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    <button id="button">Click Me</button>

    <script>
        const debounce = (func, delay) => {
            let inDebounce
            return function () {
                const context = this
                const args = arguments
                clearTimeout(inDebounce)
                inDebounce = setTimeout(() => func.apply(context, args), delay)
            }
        }

        const button = document.getElementById('button')
        button.addEventListener('click', debounce(() => {
            console.log('Hey! It is', new Date().toUTCString())
        }, 3000))
    </script>
</body>
</html>

My goal here isn't to teach you how to write the debounce. There's plenty of resources (you could literally copy paste a generic debounce function, like I did here). More so, I want you to spot the closure in there and have that "ah-ha" moment. If you want a guide or to get in depth on this function, check out the source I used.

The key here, from a closure standpoint, is our inDebounce variable. As a closure, returned function "remembers" whether or not it the variable is running a timeout. If we fire it off while it's still in the timeout, it will clearTimeout, thus restarting it.

Another instance of a closure in action.

Have you guys used debounces before? Are there different variations or use cases where its been super helpful?

Discussion (1)

pic
Editor guide
Collapse
deleteman123 profile image
Fernando Doglio

Cool trick! I'm just wondering what's the point on changing the context of the function func .
Does the result changes if you don't?