Ajax call delay

Question

I have the following jquery code that basically acts as a auto complete for an input. However, when the user types in something fairly quickly (or at normal pace for some people) the dropdown flickers back and forth between different autocompletes. Like if I type in "happy" very quickly, it might flicker between "happy" and "happiness". I think this is being caused by a delay between when the data is sent and recieved.. Any way to fix this?

var textvalue= $(this).val();
    $("#facebookDropdown").html("
    loading...
    ");
     $.ajax({
    type: "GET",
    url: "../invites/afterauth.php",
    data: "q=" + textvalue,
    success:
    function(msg){ 
    $("#facebookDropdown").html(msg)}   
    })

possible duplicate of [Run javascript function when user finishes typing instead of on key up?](http://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up) — Blender, Dec 17 '11 at 03:11

score 0 · Answer 1 · edited May 23 '17 at 11:55

I would abort your previous ajax request for each one you send out. That way they won't be stepping over each other. Another option is waiting a couple of milliseconds after each keypress to see if there is another keypress before sending the ajax request. The former being more responsive but causing more server load and the latter being less responsive but causing less server load. In fact you could do both if you wanted to.

if(previousRequest) {
  previousRequest.abort();
}

previousRequest = $.ajax(...

More info here: Abort Ajax requests using jQuery

Ajax call delay

1 Answers1