jQuery.ajax(): discard slow requests

Question

I've build a livesearch with the jQuery.ajax() method. On every keyup events it receives new result data from the server.

The problem is, when I'm typing very fast, e.g. "foobar" and the GET request of "fooba" requires more time than the "foobar" request, the results of "fooba" are shown.

To handle this with the timeout parameter is impossible, I think.

Has anyone an idea how to solve this?

Answer 1

You can store and .abort() the last request when starting a new one, like this:

var curSearch;
$("#myInput").keyup(function() {
  if(curSearch) curSearch.abort(); //cancel previous search
  curSearch = $.ajax({ ...ajax options... }); //start a new one, save a reference
});

The $.ajax() method returns the XmlHttpRequest object, so just hang onto it, and when you start the next search, abort the previous one.

Answer 2

Assign a unique, incrementing ID to each request, and only show them in incrementing order. Something like this:

var counter = 0, lastCounter = 0;
function doAjax() {
  ++counter;
  jQuery.ajax(url, function (result) {
    if (counter < lastCounter)
      return;
    lastCounter = counter;
    processResult(result);
  });
}