Debouncing

Consider a situation where we need to update visual elements upon scroll(s) or User inputs. In such cases we leverage event handlers to react to events and update data or view accordingly. Often times such events occur in bursts like a user entering text generates multiple “Key Up” or “Key Down” events and respective event handlers are invoked multiple times.

Developers attempt to circumvent multiple invocations in such scenarios using a a additional indicator as an additional trigger. For e.g. “Key Down” on “Enter” or Text box loosing the focus but these come with added UX friction.

What is Debouncing ?

Debouncing is a technique used to reduce the amount of work done to react to frequent actions or inputs, often used around functions that react to UI . For e.g.. a function invoked on user input to fetch updated data from backend upon user input change or data refresh on scroll.

Why do we need it ?

Debouncing is used to avoid multiple computations where we anticipate a pattern of burst repeated requests and only last event represents a meaningful state for the event. As explained earlier a user attempting to type a word will generate multiple “Key Down” events while only the last one really represents the final input.

Throttling Vs Debouncing

Throttling is used as a mechanism to limit invocations to protect overloading an external dependency either by a function of number of requests ( concurrent / subsequent) or rate of requests within a pre-defined timeframe.

Get Akash Yadav’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Key intent with throttling is to avoid bombarding an external dependency while debouncing saves on redundant and work that does not represent a final state.

Implementation

Debounce function implementation represents “Do the work once if requested more than zero times and has not been called in last X units of time”.

A debounce function has 3 main aspects

1. A delayed invocation for work
2. Reset delay on repeated requests
3. Actual implementation of work that needs be executed

A pseudo debounce implementation (JavaScript) may look like the following

   /*
    Debounce Function
    */
    function debounce(actualFn, delay) {
        var timerId;

        return function (...args) {
            //Clear any previous invocations if set
            clearTimeout(timerId);

            //Set timeout for the latest invocation
            timerId = setTimeout(() => {

                //Invoke the actual function
                actualFn.apply(this, args);
            }, delay);
        }
    }

Full example with a Key Down on Text input on HTML page

<html>
<body>
    <input type="text" id="myInput"></input>
    <script type="text/javascript">
        // Get the input element
        const inputElement = document.getElementById('myInput');

        /*
        Debounce Function
        */
        function debounce(actualFn, delay) {
            var timerId;

            return function (...args) {
                //Clear any previous invocations if set
                clearTimeout(timerId);

                //Set timeout for the latest invocation
                timerId = setTimeout(() => {

                    //Invoke the actual function
                    actualFn.apply(this, args);
                }, delay);
            }
        }

        //Actual Implementation of Logic
        function onlyOnce(...args) {
            console.log(inputElement.value);
        };

        // Attaching the debounced function to the keydown event
        inputElement.addEventListener('keydown', debounce(onlyOnce, 300));
    </script>
</body>

</html>

In the above example whenever user inputs a value on the text box, the event trigger will wait for 300 ms and be invoked only if no “Key Down” is detected within last 300 ms. By this was if a user is typing a word with 10 characters , the function will be invoked only once after the user is done typing.