Javatpoint Logo
Javatpoint Logo

JavaScript Debouncing

In this article, we will discuss the JavaScript debouncing () method and its implementation.

What is Debouncing?

Debouncing is a method used in JavaScript to increase browser performance. There may be some features on a web page that needs time-consuming computations. If such type of method is applied frequently, it may greatly affect the browser's performance because Javascript is a single-threaded language. Debouncing is a programming technique that assures that time-consuming activities do not trigger the web page's performance decreases. In other words, the Debounce methods do not run when invoked. Instead, they wait a predetermined period of time until executing. When we call the same process again, the previous process is canceled, and the timer is reset.

A debounce is a throttle cousin, and they both help improve the web application's performance. Although, they are seen in different situations. When we just think about the final state, a debounce is used. For example, they are waiting until a user has finished typing to retrieve typeahead search results. If we want to manage all intermediate states at a regulated pace, a throttle is the best tool to use.

Implementation of debouncing

Let's take an example to see the implementation of debounce method in the program.

A higher-order function that returns another function is known as a debounce function. It is used to create a closure around the func and wait function parameters and the timeout variable to hold their values. The definitions of the following variables are:

  1. Func: It is the func function that we want to execute after the debounce time.
  2. Wait: The time after the last received action that the debounce function can wait until executing func.
  3. Timeout: The timeout function is the value that is used to indicate a running debounce.

Example:

Let's take an example to understand the debouncing() method in JavaScript. A button is connected to an event listener, which calls a debounce function in the below example. The Debounce function has two parameters: a function and the other is a number (time). A Timer declares, which as the name implies, and calls the debounce function after a certain amount of time.

Output: After executing the above code, we will get the output as shown below:

JavaScript Debouncing

As we have seen in the above screenshot, there is a "Click here" button. When the Click Here button is pressed, a warning box appears and displays an alert message. The feature updates every time, which means that if the button is pressed before the delay time (4 seconds), the initial timer is cleared, and a new timer is started. The clearTimeOut() function is used to complete this mission.

JavaScript Debouncing

Implementation of debounce function with immediate function

The following debounce implementation returns a function that will not be called as long as it is invoked. After N milliseconds of inactivity, the function will be called again. When the function is called with the initial function as an argument, it called the function immediately and waits for the interval before calling it again.

Debounce returns a function that may be passed on to the function's event listeners when a function and a time interval are passed.

Example:

Let's take an example to understand the use of debounce function with the immediate function.

Output: After executing the above code, we will get the output shown below in the screenshot.

JavaScript Debouncing

As we have seen in the above screenshot, there is a "Debounce" button. When we click on the "Debounce" button, it shows an alert message. If we click on the "Ok" button, the alert message will disappear.

JavaScript Debouncing

Application Uses

Debouncing can be used to implement suggestive text, where we wait a few seconds for the user to stop typing before proposing the text. As a result, we wait a few seconds after each keystroke before making suggestions. Debouncing is often used on content-loading websites like Facebook and Twitter, where the user continues scrolling. Because there are so many videos and photos, it will have a performance effect if the scroll event is fired too often. As a result, debouncing must be used in the scroll case.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA