Question 70010 in Ajax Question posted in
You can find the official documentation here.

How to avoid multiple AJAX calls after setTimeout – Jquery ajax

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.

Tags:

3

Answers


  1. 0

    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('-');
  }
});
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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('-');
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search