How to avoid multiple AJAX calls after setTimeout

Question

I have a text field in which I respond to typing by checking the database for the number of matches, but I don't want to pummel the database with too many queries for no reason if the user types several characters quickly.

Searching the web, the advice seems to be to wrap it all in setTimeout() , but I apparently don't understand how to use it properly. Here is my code at the moment:

$(".qs-text").keyup(function() {
  if ($(this).val().length > 2) {
    setTimeout(function() {
      $.get("ajax_request.php?req=Quicksearch&qs=" + $(".qs-text").val(), function(data) {
        $('.qs-hits').text(data);
      });
    }, 500);
  } else {
    $('.qs-hits').text('-');
  }
});

It does wait 500ms, and at the end of the timeout period, it does use the final state of the field in the request - good.

However then it sends multiple identical requests (one for every character I typed) instead of just one. That defeats the purpose of having the timeout in the first place. I can almost see why the code would do that, since the keyup event fires every time, but I have no idea how to solve it. There are other questions whose titles sound like what I'm asking, but every one I've read is different enough that I can't quite apply any of them to my case.

Answer 1

You need cancel timeout when create a new.

var timeout = null;
$(".qs-text").keyup(function() {
  if(timeout != null) clearTimeout(timeout);
  if ($(this).val().length > 2) {
    timeout = setTimeout(function() { $.get("ajax_request.php?req=Quicksearch&qs="+$(".qs-text").val(), function(data) {
      $('.qs-hits').text(data);
    }); },500);
  } else {
    $('.qs-hits').text('-');
  }
});

Answer 2

We usually store the timeout in variable and then clear it conditionally when call a new one. However for large web application, I suggest using web sockets for such subsequent calls for real-time experience

var timer;
$(".qs-text").keyup(function() {
    if ($(this).val().length > 2) {
        clearTimeout(timer);
        timer = setTimeout(function() {
        $.get("ajax_request.php?req=Quicksearch&qs=" + $(".qs-text").val(), function(data) {
            $('.qs-hits').text(data);
        });
        }, 500);
    } else {
        $('.qs-hits').text('-');
    }
});

Answer 3

I would recommend using something like lodash for debouncing, so you can do something like this

$(".qs-text").keyup(function() {  

   _.debounce(()=> {
     $.get("ajax_request.php?req=Quicksearch&qs="+$(".qs-text").val(), function(data) {
      $('.qs-hits').text(data);
    })
   }, 500)
  

});

for more info, https://lodash.com/docs/4.17.15#debounce