javascript - Abort Ajax requests using jQuery

As many people on the thread have noted, just because the request is aborted on the client-side, the server will still process the request. This creates unnecessary load on the server because it's doing work that we've quit listening to on the front-end.

The problem I was trying to solve (that others may run in to as well) is that when the user entered information in an input field, I wanted to fire off a request for a Google Instant type of feel.

To avoid firing unnecessary requests and to maintain the snappiness of the front-end, I did the following:

var xhrQueue = [];
var xhrCount = 0;
$('#search_q').keyup(function(){
    xhrQueue.push(xhrCount);
    setTimeout(function(){
        xhrCount = ++xhrCount;
        if (xhrCount === xhrQueue.length) {
            // Fire Your XHR //
        }
    }, 150);
});

This will essentially send one request every 150ms (a variable that you can customize for your own needs). If you're having trouble understanding what exactly is happening here, log xhrCount and xhrQueue to the console just before the if block.