Debounce – How To Delay A Function In Javascript Or Jquery

In JavaScript or jQuery, a debounce makes sure that your code is only triggered once per user input. Search box auto-populate, text-field auto-saves, and eliminating multi-button clicks are all use cases for debounce.

Debouncing is used to limit the execution of a function. Typically, how many times or when a function will be performed is decided by the developer. But in some possibilities, developers give this ability to the users. Now, it is up to the user to decide when and how many times to perform that function.

Let’s consider an example of a search box on a website. Every time you type something in the search box, it makes an API call to fetch the data from the server based on the letters typed in the search box.

The anonymous function displays the number of times the user has fired the input event while typing. Inside the anonymous function, we are calling the Makesearch function, which performs some heavy computation. The Makesearch function calls an API that fetches data from the database, does some processing on that data, and then returns the response.

Suppose the Makesearch function takes 500 milliseconds to get data from the API. Now, if the user can type 1 letter per 100 milliseconds, then the Makesearch function will be called 5 times in 500 milliseconds. Thus even before the Makesearch has completed its task and returned the response, we are making 4 more API calls, which will put an extra load on the server.

In the debouncing, no matter how many times the user fires the event, the attached function will be executed only after the specified time once the user stops firing the event. Like when a user stops typing in the input field.

For example, a user is clicking a button 5 times in 100 milliseconds. Debouncing will not let any of these clicks perform the attached function. Once the user has stopped clicking, if debouncing time is 100 milliseconds, the attached function will be performed after 100 milliseconds.

setTimeout

setTimeout is a setup function in JavaScript that can be used to prepare the execution of any function. It is a web API provided by browsers and used to execute a function after a specified time. Here’s the basic syntax:

function delayExec() {
     console.log("This will be called after 100 milliseconds");
}

var timerId = setTimeout(delayExec, 100)

clearTimeout

clearTimeout is used to cancel the timeout previously established by calling the setTimeout function. clearTimeout takes the timerId returned by the setTimeout as input and cancels its execution.

function delayExec() {
     console.log("This won't be executed as it will be cancelled");
}

var timerId = setTimeout(delayExec, 100)
clearInterval(timerId)

Hence, Makesearch functions scheduled by setTimeout due to the user typing in the textbox will be canceled by the clearTimeout function. Only the Makesearch function scheduled by the last letter in the textbox will execute after the specified time of 100 milliseconds.

In the above image, we can see that, when the user is typing, the number of input events fired is much larger than the number of times debounce executed the function. Also, debounce executed the function only after the user stopped typing in the search box.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories