jQuery Keyup Ajax Request: Kill previous requests

Question

I have a script that does an ajax request out on a keyup event on my search input box. I am noticing in Firefox (I am looking at the console) that every request that is sent off finishes. So there are a ton of ajax requests that happen.

Is there anyway to kill an ajax request in progress upon a keyup event?

jQuery:

jQuery(function() {
  var request;
  request = function(url, keyword) {
    return $.post('/backpack/' + url + '/search?keyword=' + keyword, function(data) {
      var el;
      el = "#result_" + url;
      return $(el).html(data);
    });
  };
  $("#search_text").bind("keyup", function() {
    var query, url, _i, _len, _ref;
    query = $(this).val();
    if (query.length > 2) {
      _ref = ['tracks', 'albums', 'artists'];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        url = _ref[_i];
        request(url, query);
      }
      return $("#search_suggestions").show();
    } else {
      return $("#search_suggestions").hide();
    }
  });
  return $("#suggestion_all_results").bind("click", function() {
    return $('#search_form form').submit();
  });
});

I don't know how to kill existing Ajax requests, but why are you making three requests on every keystroke (one for each of 'tracks', 'albums' and 'artists')? Wouldn't it be easier to combine that into a single request that returns the three types of data in separate properties within a single JSON string (or as a single block of HTML as needed)? Also, why request on every keystroke? A user could easily be typing more than five characters every second, so you might be better off setting a short timeout on each keystroke so that you can restrict the requests to one per second or something. — nnnnnn, Nov 09 '11 at 22:48
Thanks for the much needed assessment questions. I am rewriting the script to better accommodate for a no-memory-leak kinda script. The script was already written before I took over this piece of JS — dennismonsewicz, Nov 11 '11 at 14:16

score 5 · Accepted Answer · edited May 23 '17 at 12:15

This has already been answered in the ultimate-uber-authoritative thread here.

Short answer: it returns an XHR object and you can call abort()

If you are sending on keyup events, you might also think about adding a delay; it's going to be a pretty big load on your server, so wait for a pause of a few seconds between strokes before you bother kicking off the event.

As Erv Walter said in the above thread's comments: "Of note, if the server has already received the request, it may continue processing the request (depending on the platform of the server) even though the browser is no longer listening for a response. There is no reliable way to make the web server stop in its tracks with processing a request that is in progress."

I've run into the same issues doing ajax suggest lookups ;)

Thanks for the comments! I am rewriting a massive amount of the JS within this app and this is one of the beasts that is destroying browsers... — dennismonsewicz, Nov 11 '11 at 14:18

score 0 · Answer 2 · answered Nov 09 '11 at 22:42

0

You just have to save the returning value of each request you send and, before adding a new one, just do a savedRequest.abort() first.

answered Nov 09 '11 at 22:42

samura

4,375
1
19
26

jQuery Keyup Ajax Request: Kill previous requests

2 Answers2

Linked