JavaScript Debounce vs. Throttle
Tags: javascript, webdev, programming, beginners
Published: 2022-11-17 12:02:46

---
title: JavaScript Debounce vs. Throttle
published: true
date: 2022-11-17 11:00:49 UTC
tags: javascript, webdev, programming, beginners
canonical_url: https://www.syncfusion.com/blogs/post/javascript-debounce-vs-throttle.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1waaog7xowa4elutcf5j.png
---

Performance is one of the most crucial aspects of modern web applications. As developers, we follow various techniques to enhance application performance and provide a better user experience. For example, debouncing and throttling are two simple, yet powerful techniques we can use in JavaScript applications to improve performance.

In this article, I will introduce debouncing and throttling in JavaScript, compare them, and discuss why we need to use them.

## Why do we need to debounce and throttle?

Usually, developers have the freedom to decide when to call a function. But sometimes, they have to hand over control to users. For example, event triggers are widely used in applications to trigger functions based on events like key presses, button clicks, and mouse movements. In such situations, users can trigger those events far more than required and cause significant performance issues in the application.

For example, consider a search bar where we need to display a suggestion list as the user types. We can implement this using an event listener to bring data from the backend on each key press. However, it will negatively impact application performance, since it will make an API call each time the user presses a key.

The following code shows an example of this scenario. It will make 10 API calls if we type the word **JavaScript.**  
**// index.html**

```xml
<html>
  <body>
    <label>Search Here : </label>
    <input type="text" id="search-bar" />
  </body>
</html>
```

**// index.js**

```js
var searchBarDom = document.getElementById('search-bar');
var numberOfKeyPresses = 0;
var numberOfApiCalls = 0;

function getSearchResult() {
  numberOfApiCalls += 1;
  console.log('Number of API Calls : ' + numberOfApiCalls);
}

searchBarDom.addEventListener('input', function (e) {
  numberOfKeyPresses += 1;
  console.log('Search Keyword : ' + e.target.value);
  console.log('Number of Key Presses : ' + numberOfKeyPresses );
  getSearchResult();
});
```

![API calls made by the JavaScript search bar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/JavaScript-Debounce-vs.-Throttle.png)

You can find a working example of this code in [StackBlitz](https://stackblitz.com/edit/js-b54zep?file=index.js "Search bar showing suggestion list demo on StackBlitz").

As you can see, there is a significant number of unnecessary API calls in the previous example. In such situations, we can use debouncing and throttling to reduce the number of API calls triggered by the user event and improve the application performance without any drag on the user experience.

So, let’s see these two techniques and how we can implement them.

## What is debounce?

The concept of debouncing is pretty straightforward. It delays the function invocation by a defined period of time to avoid unnecessary invocations. So, the function will only be invoked if no event is triggered within that time. If the user triggers a new event during that time, the time will be reset.

Let’s consider the previous example again. The issue with the scenario was unnecessary API calls. So, if we define a debounce function with a delay of one second, it will hold back the API call until one second passes without any user events. If the user presses a key within that second, the debounce function will reset the delay and wait for another second to make the API call.

### How to implement a debounce function

We can easily implement a debounce function using the **setTimeout()** and **clearTimeout()** functions. It should also take a callback function and the delay as input parameters.

```js
function debounce(callback, delay = 1000) {
  var time;

  return (...args) => {
    clearTimeout(time);
    time = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}
```

As you can see, the debounce function acts as a wrapper for the callback function and ensures that it will be invoked after the delay. In this case, the default delay is 1,000 milliseconds.

Let’s now modify the search bar example code with a debounce function.

```js
var searchBarDom = document.getElementById('search-bar');
var numberOfKeyPresses = 0;
var numberOfApiCalls = 0;

const getSearchResult = debounce(() => {
  numberOfApiCalls += 1;
  console.log('Number of API Calls : ' + numberOfApiCalls);
}, 1000);

searchBarDom.addEventListener('input', function (e) {
  numberOfKeyPresses += 1;
  console.log('Search Keyword : ' + e.target.value);
  console.log('Number of Key Presses : ' + numberOfKeyPresses);
  getSearchResult();
});

function debounce(callback, delay = 1000) {
  var time;
  return (...args) => {
    clearTimeout(time);
    time = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}
```

![Implementing debouncing in the JavaScript search bar to display suggestion list](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Debounce.png)

Although the user has typed the word **JavaScript,** only a single API call has been invoked. So, debouncing has blocked nine unnecessary API calls from the previous example. You can find a working example of this code in [StackBlitz](https://stackblitz.com/edit/js-qfqsqx?file=index.js "Implementing debouncing in search bar demo on StackBlitz").

## What is throttle?

Throttle is another technique to minimize unnecessary function invocations when using event listeners. However, throttle works a bit differently from debouncing. Instead of delaying, it invokes the callback function at regular intervals as long as the event trigger is active.

For example, assume we have defined the delay as one second in a throttle function. First, it will invoke the callback function immediately. Then, it will use the delay time as the waiting time and invoke the callback function every second until the event trigger becomes inactive.

### How to implement a throttle function

We can implement a throttle function using the **setTimeout()** function and a flag variable. It should take a callback function and the delay as input parameters.

```js
function throttle(callback, delay = 1000) {
  let shouldWait = false;

  return (...args) => {
    if (shouldWait) return;

    callback(...args);
    shouldWait = true;
    setTimeout(() => {
      shouldWait = false;
    }, delay);
  };
}
```

In debouncing, we implemented the debounce function as a wrapper of the callback function, since we delay the callback function invocation. But in throttle implementation, we immediately invoke the callback function if the **shouldWait** flag is false. Then, the **setTimeout()** function is used to update the flag value based on the delay we define.

The following code shows the initial search bar example optimized with a throttle function.

```js
var searchBarDom = document.getElementById('search-bar');
var numberOfKeyPresses = 0;
var numberOfApiCalls = 0;

const getSearchResult = throttle(() => {
  numberOfApiCalls += 1;
  console.log('Number of API Calls : ' + numberOfApiCalls);
}, 1000);

searchBarDom.addEventListener('input', function (e) {
  numberOfKeyPresses += 1;
  console.log('Search Keyword : ' + e.target.value);
  console.log('Number of Key Presses : ' + numberOfKeyPresses);
  getSearchResult();
});

function throttle(callback, delay = 1000) {
  let shouldWait = false;

  return (...args) => {
    if (shouldWait) return;

    callback(...args);
    shouldWait = true;
    setTimeout(() => {
      shouldWait = false;
    }, delay);
  };
}
```

![Implementing throttle function in JavaScript search bar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/How-to-implement-a-throttle-function.png)

As you can see, only three API calls were made in this example when I typed the word **JavaScript.** The first call is the initial call, and the other two were made after 5 and 10 key presses, respectively. So, the throttle function has reduced seven unnecessary API calls. You can find a working example of this code in [StackBlitz](https://stackblitz.com/edit/js-qyy5gk?file=index.js "Search bar with throttle function demo on StackBlitz").

## Difference between debounce and throttle

Debounce monitors the time delay between user actions and only executes the callback function if the delay exceeds the time delay defined by the developer. So, continuous user actions can significantly delay the callback function’s execution if we use debounce.

On the other hand, throttle uses the time delay to execute the callback function at regular intervals until the event trigger is active. So, it does not delay the callback function execution for a significant period like debounce.

## When to use what

I explained both debounce and throttle using a search bar example with key press events. However, there are some specific scenarios where we should use one or the other of these techniques:

- Debounce is most suitable for control events like typing or button clicks.
- Throttle is most suitable for continuous user events like resizing and scrolling.

## Conclusion

This article discussed how we could use debounce and throttle to handle user events and minimize unnecessary function executions in JavaScript applications. Ultimately, these two techniques can significantly improve your application’s performance since they can avoid many unnecessary API calls, DB queries, and so on. So, give them a try when implementing event triggers on your next application.

Thank you for reading!

Syncfusion’s [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Essential JS 2 UI controls") is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a [free trial](https://www.syncfusion.com/downloads/essential-js2 "Free evaluation of the Syncfusion Essential Studio") to evaluate the controls today.

If you have any questions or comments, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [JavaScript Debugging with VS Code and Chrome](https://www.syncfusion.com/blogs/post/javascript-debugging-with-vs-code-and-chrome.aspx "Blog: JavaScript Debugging with VS Code and Chrome")
- [JavaScript String Manipulation Techniques Every Developer Should Know](https://www.syncfusion.com/blogs/post/javascript-string-manipulation-techniques-every-developer-should-know.aspx "Blog: JavaScript String Manipulation Techniques Every Developer Should Know")
- [JavaScript API Mocking Techniques](https://www.syncfusion.com/blogs/post/javascript-api-mocking-techniques.aspx "Blog: JavaScript API Mocking Techniques")
- [JavaScript Map vs. Object](https://www.syncfusion.com/blogs/post/javascript-map-vs-object.aspx "Blog: JavaScript Map vs. Object")