jQuery AJAX request slow even though all previous requests aborted

Question

I have a search filter that fires an ajax request to update the result set upon changing filters. It often happens that the user will change many filters in one go, firing off many AJAX requests.

So I decided to abort previous requests if a new one is made (by using the ajax.abort() function). Now... Firebug shows all those requests as being aborted, but the last request (the only one not aborted) takes increasingly longer the more aborted requests before it.

So, for example, if I change just one filter, it'll take 1 second to load the request. But if I change 5 filters in one go, it aborts 4 of them, leaving only the last request. However, this request ends up taking 5 seconds to complete.

Anyone know why this is? I'm guessing that even though jQuery aborts the request, my server still processes it? (I'm running a local Rails Mongrel in development mode, fyi) That kinda defeats the whole reason why I aborted the requests... What can I do to solve this problem??

Help is much appreciated!

Answer 1

You might want to try an approach by delaying requests if the user's search parameters are being input rapidly. For example in one of my applications I wait until the user has stopped for a half second.

  $("#user_login").keypress(function() {
    var login = this;
    if (this.value != this.lastValue) {
      $("#loading_small").addClass("loading-small");
      if (this.timer) { clearTimeout(this.timer); }
      this.timer = setTimeout(function() { 
        $.get("/users/login_validate", $(login).serialize(), function(data) {
          $("#loading_small").removeClass("loading-small");
          $("#login_valid").fadeIn().html(data);
        });
      }, 500);
    }
  });