DEV Community

Cover image for Debouncing in JavaScript
Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev

1

Debouncing in JavaScript

Imagine your web application makes requests to an API endpoint and each request has a price, debouncing the request operation may save you a great deal of money.

There are cases where you have long-running operations and these operations are in a position where they can be fired frequently by your application users. Such operations invoked continuously may affect the performance of your web application.

Debouncing is a technique that ensures long-running operations are not fired so often. It delays the execution of that particular program.

A common example is a search operation that is fired whenever a user types a query in an input field. Debouncing the operation would mean waiting for the user to stop typing for a particular time (usually milliseconds) before running the search operation.

Let’s write a simple implementation here:

function debounce(func, time = 300) {
  let timer;

  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), time);
  };
}
Enter fullscreen mode Exit fullscreen mode

Now we can create a mock project to see how this may function in a real application.

<!-- index.html -->
<html>
  <head>
    <title>Mock Search Page</title>
  </head>
  <body>
    <label for="search">Enter your search</label>
    <input id="search" type="text" name="search" />
    <script>
      const nameElement = document.querySelector("#search");

      function debounce(func, time = 500) {
        let timer;

        return (...args) => {
          clearTimeout(timer);
          timer = setTimeout(() => func.apply(this, args), time);
        };
      }

      const debouncedSearchFunction = debounce((event) => {
        console.log("querying: " + event.target.value + "....");
      });

      nameElement.addEventListener("keyup", (event) => {
        debouncedSearchFunction(event)
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the code above, debounce returns a function and keeps a local variable timer (they both form a closure). timer acts like a state to manage the timing.

In the event listener callback, we call the function that is returned by debouce and, as we can see, the arguments in this function are passed to the func argument using the method [Function.prototype.apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply).

Conclusion

As I mentioned in the introduction of this article, in a case where each of your requests to an API endpoint is paid and the operations can be fired by the actions of a user. Debouncing the operations can be done to create a form of throughput per time (milliseconds).

I recently got nominated for two categories in Noonies 2022 by Hackernoon. You can vote for me (Kayode Oluwasegun) as a sign of support using these two links:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more