JavaScript Throttling and Debouncing Functions Explained: Optimize Your Code

JavaScript Throttling and Debouncing Functions Explained: Optimize Your Code

ยท

4 min read

The idea to define the function is to call them only after some given time. The DOM events change rapidly, and calling them without any resistance can make function requests rapidly.

Throttling and Debouncing are the methods for such ideas.

Why Throttling and Why Debouncing? [ Big Picture ]

Throttling:

  • To trigger the function only a certain interval of time, in rapidly calling DOM events like scrolling.

  • Like you saw some webpages which trigger a pop-up after the scroll, then it may be using the scroll height event listener to call the function or the throttling function to call the pop-up again at a certain interval.

  • In easier terms, it's like the ad feature on Spotify, when you listen to a paid ad they get you to listen to music without any interruption for 30 mins ๐Ÿ˜‚, while you can change as many songs in between, the idea is similar for throttling.

  • In the above GIF, you can make an idea of calling the function at a certain interval. i.e 2 seconds here.

Debouncing:

  • Debouncing is a method where you define at what time the function would be called.

  • Here we will understand the idea of debouncing from the real-world implementation. If you have noticed while searching some products on an e-commerce website it just results in the product after 1 or 2 seconds later when you stop typing.

  • Here it only triggered the time function after a certain time. We will discuss the logic later in this blog for implementation.

  • Here you can see it triggers the function when we left typing.

Note: Just don't read the code initially just think, if you would try to implement with the present knowledge you have. Then read the theoritical points mention below.

Understanding the CODE for Throttling:

function throttle(fn, delay) {
    let lastCall = 0; // declaring variable out of scope returned

    return function(...args) { // returning the function for the calculation
        const now = new Date().getTime(); // assign time in ms when called

        /* checks if the delay is still greater when the last time function 
        was called, if not then return*/
        if (now - lastCall < delay){
            return;
        }

        /* if delay got called to less then it proceed to here
        and attempting to call the given function which had given to
        the parameters*/
        lastCall = now; // lastCall is now :]
        return fn(...args); // CALLED.
    }

}

function handleResize(e){ // The function, called after the certain time
    console.log(e.target.value);
}

// Event listener to trigger throttle every time key up.
document.getElementById('test-id').addEventListener('keyup', throttle(handleResize,2000));
  • You can easily understand the implementation of the throttling function if you know the closures.

  • As the event listener triggers the function for the first time it returns the function and assigns that time to 'lastCall' variable.

  • This is then remembered after each call, as each call will return the function and assigns it to the call stack of the event loop.

  • It remembers the lastCall value till the anonymous functions in the call stack empty it.

  • And repeat when the event triggers again.

Understanding the CODE for Debouncing:

function debounce(fn, delay){
    let timeOutId; // variable out from the scope

    return function(...args){ // same anonymous fun, by using closures

        /* checks if timeOutId has some value, if it does then clear the
        called setTimeOut*/
        if(timeOutId){
            console.log("wait");
            clearInterval(timeOutId);
        }

        timeOutId = setTimeout(()=>{ // setTimout triggered
            console.log("Triggered");
            fn(...args);
        },delay);
    }

}
  • Initially, when timeOutId is undefined, it calls the setTimeout which then returns an ID for its address (not an actual address, it's ID).

  • After then, each event returns the anonymous function which checks if there is any previously called setTimeout present if it presents then cancels out the last setTimeOut stacked in the Web API Call stack.

  • On the last keystroke when we left typing there would be a last setTimeOut present in the stack to be called up. and then returns the result.

TL;DR

Both methods for controlling the frequency of function calls.

  • Throttling: When dealing with events that happen quickly, such as scroll events or keystrokes, this is helpful. You may prevent overloading your application with function calls by throttling these events, as it only called for specific intervals.
  • Debouncing: It is similar to throttling but restricts the total number of calls made to a function over time rather than the number of calls made to a function per unit of time. Dealing with sudden circumstances typically requires doing something like this.

Thank You if you made it to last, and I made you understand both concepts. ๐Ÿ˜Š

ย