In my , I talked about previous article throttling . This time, we will look at the debounce function and how it differs from throttling . How to Use Debounce Using , the function will be executed only when a certain amount of time has passed since the last function call. The delay starts again with each new call. debounce For instance, if you set a debounce with a time of 100 ms to the event, then the function will be executed 100 ms after the scroll stops. onscroll Another example of using is sending AJAX requests to the server. Let's say there is a search field on the website and you need to send requests after the user enters a request, and at the same time, limit the sending of requests for each character pressed. debounce In this case, you can use , and set the time interval after which the request will take place. For example, by setting 1000 ms, the request will occur only after the pressing speed has exceeded 1 second. debounce Schematically, it can be displayed in the following way: Just to compare, I’ll duplicate the scheme from the : throttling previous article Many JavaScript libraries such as , , and provide and methods with various additional features. Below you can view an implementation of the method: lodash underscore rxjs debounce throttle debounce const debounce = function debounce(fn, time) {
    let timeout = null;
    return function () {
        const context = this;
        const args = arguments;
        const later = () => {
            fn.call(context, ...args);
            clearTimeout(timeout);
            timeout = null;
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, time);
    }
} is a higher-order function that takes 2 arguments: a main function and a timer. You can learn more about higher-order functions in our series of articles about . Debounce functional programming Each function call updates the timer. When the timer expires, the function is executed. For instance, let's write a simple window resize event handler, just like we did in the article: throttling const handleResize = () => {
    const { innerHeigh, innerWidth } = window;
    console.log({ innerHeigh, innerWidth });
}

window.addEventListener('resize', handleResize) Let's wrap the handler in the debounce function, and then make sure that the function is called only once: const handleResize = () => {
    const { innerHeigh, innerWidth } = window;
    console.log({ innerHeigh, innerWidth });
}

const handleResizeDebounced = debounce(handleResize, 500);
 
window.addEventListener('resize', handleResizeDebounced); The above example makes almost no sense in practice. The main thing is to understand the logic, and that the purpose of the and functions are to reduce the load on the browser by reducing the number of calls. debounce throttle Debounce Use Cases General use cases are as follows: debounce Let's say that when resizing the browser window, some dynamic elements are redrawn, which ends up with complex calculations in many cases, so here we can take advantage of both and . Browser window resizing: throttle debounce The optimization will be more significant since the function call will only take place when the user has finished resizing the browser window; while with , the passed function will fire in the process of resizing after a given timeout. debounce throttle For instance, when entering a request in a search field, use the function in the corresponding event handler with a delay of 200 milliseconds. Reducing the number of AJAX requests: debounce Thus, the request will not be sent to the server after each letter is entered but will be sent once after the user stops entering a query and only after 200 milliseconds. Choosing a Function Depends on the Task If you need the function to be executed at a certain frequency during any action (resize, scroll, keydown), use throttle If you need to call a function at the end of some action, it’s better to use debounce If a function call is required at the beginning of an action, then we use with an additional immediate call parameter debounce Conclusion This article describes how the and functions work and how to use them. throttle debounce You may not fully understand the logic of the and functions at first, but it will be a huge advantage to use these functions during development, as this reduces the load on the browser, and therefore on the user's device. throttle debounce

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Function Range in JavaScript: Generating a Sequence of Data

Eliminating Event Storms With Debouncing in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Function Composition (Pipe, Compose) in JavaScript Explained

AJAX in a nutshell

Ajax Interacting With Security Systems Champion: Type 5 Certification Scheme

An Intro to Data Tables On Rails

Consume REST Services with AJAX and CSRF protection in Django

Function Composition (Pipe, Compose) in JavaScript Explained

AJAX in a nutshell

Ajax Interacting With Security Systems Champion: Type 5 Certification Scheme

An Intro to Data Tables On Rails

Consume REST Services with AJAX and CSRF protection in Django

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps