Stop previous ajax when new request is made

Question

I have a script

$('#postinput').on('keyup',function(){ 
    var txt=$(this).val();

    $.ajax({
       type: "POST",
       url: "action.php",
       data: 'txt='+txt,
       cache: false,
       context:this,
       success: function(html)
       {
           alert(html);
       }

   });

});

Suppose someone types a ,ajax runs . Immediately he types b c and so on. Ajax runs everytime. Is there a way to stop previous request when new is made ?

Why don't you start only one request after the last keystroke? — Andreas, Oct 28 '13 at 12:03
possible duplicate of [Abort Ajax requests using jQuery](http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — , Oct 28 '13 at 12:04
@Andreas i was using loading image to show processing. `setTimeout` was giving me problem with loading image show n hide. — Ace, Oct 28 '13 at 12:28
Possible duplicate of [Abort previous ajax request on new request](https://stackoverflow.com/questions/19244341/abort-previous-ajax-request-on-new-request) — The Codesee, Jul 01 '17 at 13:25

score 3 · Accepted Answer · answered Oct 28 '13 at 12:02

You can use the abort() method of the xhr. Try this:

var currentXhr;
$('#postinput').on('keyup',function(){ 
    currentXhr && currentXhr.readyState != 4 && currentXhr.abort(); // clear previous request

    var txt = $(this).val();
    var currentXhr = $.ajax({
        type: "POST",
        url: "action.php",
        data: 'txt=' + txt,
        cache: false,
        context:this,
        success: function(html) {
            alert(html);
        }
    });
});

If you don't want to use a global variable, you could store the xhr in a data-* attribute of the #postinput element.

Another method is to only fire the AJAX request when the user has stopped typing:

var timer;
$('#postinput').on('keyup',function(){ 
    clearTimeout(timer);

    var txt = $(this).val();
    var timer = setTimeout(function() {
        $.ajax({
            type: "POST",
            url: "action.php",
            data: 'txt=' + txt,
            cache: false,
            context:this,
            success: function(html) {
                alert(html);
            }
        });
    }, 100); // sends request 100ms after typing stops.
});

Hey tnx. I wanted to ask 2 things . Whatever im trying to do.. is it a wrong practice to stop ajax ? Suppose i'm using multiple ajax. the above code won't affect other ones ryt? — Ace, Oct 28 '13 at 12:05
Stopping AJAX isn't a bad thing at all. I'd say it's a very good thing to stop AJAX requests which are out of date. By storing the reference you will only stop processing of that specific request, all others will be unaffected. — Rory McCrossan, Oct 28 '13 at 12:06

score 0 · Answer 2 · answered Oct 28 '13 at 12:06

You can do like this with Jquery-

jaxRequests = new Array();

queueRequest = function(whatever, you, want) {
    if(ajaxRequests[ajaxRequests.length - 1]) {
        ajaxRequests[ajaxRequests.length - 1].abort();
    }

    ajaxRequests[ajaxRequests.length] = //Insert New jQuery AJAX call here.
}

Stop previous ajax when new request is made

2 Answers2