kill all ongoing XHR requests

Question

$('#search-box').keyup(function() { // bind the search data var input = $('.search-input').val();

 $.getJSON({ // get JSON data
        url: 'example/query.php?keyword=' + input,
        //pre-load
        beforeSend: function() {
            $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>");
        },
        success: function(data) { 
            if (input.length >= 3) { // limit keyword to >=3
                var output = "<ul class='search-lists'>"; //output search data list
                $.each(data, function(key, val) {
                    output += '<li>';
                    output += '<a>' + val.term + '</a>';
                    output += '</li>';

                });
                output += '</ul>';
                $('.search-results').html(output);
                console.log('load ajax');
            } // end if

           else {
                console.log('kill ajax');
           }
        }


    }); // JSON request

}); // data bind

thanks rayon , how do i fix this other one if the input's length is < 3 or the XHR result is an empty array you should kill all ongoing XHR requests and close the dropdown — webmansa, Apr 29 '16 at 06:27

score 0 · Answer 1 · answered Apr 29 '16 at 06:37

You have to do checking first, only than do filtering. Also I suggest using setTimeout to reduce server calls:

<section id="search-box">
     <form class="search-field">
         <input id="search" class="search-input" type="text"  value="Hello, I'm looking for..." />
     </form>
     <div class="search-results"></div>
</section>


var timer;

$('#search-box').keyup(function() { // bind the search data
    clearTimeout(timer);

    var input = $('.search-input').val();

    if (input.length < 3) {
        return;
    }

    timer = setTimeout(function () {
        $.getJSON({ // get JSON data
            url: 'http://test.sonsuzdongu.com/query.php?keyword=' + input,
            //pre-load
            beforeSend: function() {
                $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>");
            },
            success: function(data) { 
                var output = "<ul class='search-lists'>"; //output search data list

                $.each(data, function(key, val) {
                    output += '<li><a>' + val.term + '</a></li>';
                });

                output += '</ul>';
                $('.search-results').html(output);
                console.log('load ajax');
            }
        }); // JSON request
    }, 300); //setTimeout
}); // data bind

To kill all request - you can try reloading page (requests will be terminated than). Or simply add some flag that indicates if you need to process further outputs or not.

success: function (data) {
     if (!data.isEmptyObject()) {
         // do processing.
     }
}

Hi , Justinas it seems not to work my console error says "a.isEmptyObject" is not a function can you help me with that pls — webmansa, Apr 29 '16 at 06:47
this is my full console.log result scripts.js:1 Uncaught TypeError: a.isEmptyObject is not a functionsuccess @ scripts.js:1fire @ jquery.js:3187fireWith @ jquery.js:3317done @ jquery.js:8785(anonymous function) @ jquery.js:9151 — webmansa, Apr 29 '16 at 07:18

score 0 · Answer 2 · answered Apr 29 '16 at 10:18

0

There is an abort method for cancelling the xhr request. You could use that as per your requirements.

answered Apr 29 '16 at 10:18

Ravi Tiwari

946
8
17

Refer this SO question [link](http://stackoverflow.com/questions/4551175/how-to-cancel-abort-jquery-ajax-request) – Ravi Tiwari Apr 29 '16 at 10:25

score 0 · Answer 3 · answered Apr 29 '16 at 10:34

just store the request like this, and then you can abort the request whenever you want.

var request = null;

 ....
 ....

 function fetchJSON (){
    if(request != null) {
        request.abort();
    }
    request = $.getJSON({ // get JSON data
            url: 'example/query.php?keyword=' + input,
            //pre-load
            beforeSend: function() {
                $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>");
            },
            success: function(data) { 
                request = null;
                if (input.length >= 3) { // limit keyword to >=3
                    var output = "<ul class='search-lists'>"; //output search data list
                    $.each(data, function(key, val) {
                        output += '<li>';
                        output += '<a>' + val.term + '</a>';
                        output += '</li>';

                    });
                    output += '</ul>';
                    $('.search-results').html(output);
                    console.log('load ajax');
                } // end if

               else {
                    console.log('kill ajax');
               }
            }


        }); // JSON request

    }); // data bind
 }

kill all ongoing XHR requests

3 Answers3