DEV Community


Posted on

A debounced function call with JavaScript in a vue app

Here I want to talk about the concept of debounce, or rather something really similar to it.

So I was faced with the need to limit the number of api calls I make to an endpoint, as the endpoint has a middleware that limits the amount of calls you can make to it. (a call per second for each client, for any api calls more than two per second, it throws an error). So if you also ever need to use this kind of api, this post will be helpful.

The solution is rather simple thanks to the JavaScript setTimeout function. So based on the restriction set by this api, I needed a way to control the frequency of the api calls to be at most one per second.

Do note, I needed to call this api to implement a search functionality. This means that a user of the app will be calling the api per keystrokes (as they type to search). This resulted in the api getting called frequently as an average user type more than one character per second.

The summary of solution to this is “for every api request a user make, check if there was any request made less than a second ago. If there is, “defer” the new api request to a second later, else call the api immediately”.

The solution will be tailored to vuejs app but it can also be used on other stack.

To implement this solution, the following will be needed.

<input type="text" @input="handleSearch" placeholder="search"/>
Enter fullscreen mode Exit fullscreen mode
data() {
  return {
Enter fullscreen mode Exit fullscreen mode
  async search(){
    await yourThrottledApi();
    // the api endpoint with request limit of 1 
    // request per second

  deferredSearch() {
    if (this.search_timeout) clearTimeout(this.search_timeout);
    // this delete pending api request, so we don't have more 
    // than one pending request queued

    this.search_timeout = setTimeout(() =>, 
   // create a pending request which is called after a delay


  handleSearch() {
     this.can_start ? : this.deferredSearch();
    // this handles the search such that search api request is 
    // called immediately if 'can_start' is true, else the
    // request is delayed for a second


  resetCanStart() {
    this.can_start = false;


    this.can_start_timeout = setTimeout(() => {
       this.can_start = true;
    }, this.delay);

    // this set 'can_start' to false immediately after a request, 
    // and then set it back to true after a delay (1 second) 
    // (i.e it blocks another request from being made by setting 
    // 'can_start' to false, then allows new request only after 1 
    //  second by setting 'can_start' to true


Enter fullscreen mode Exit fullscreen mode

Implications of the solution

  1. For instance where the api returns the result in less than a second (say T second), consequent api calls made immediately will be forcibly delayed for some moment i.e (1 second - T second).

  2. Some api request won't be made if both of these conditions are true

    • the current request is made less then a second after the last request
    • another request is made less than a second after the current request

Top comments (0)