Отменить запросы AJAX в полете с использованием JQuery.ajax?

Возможный дубликат:
Убейте запросы Ajax, используя JavaScript, используя jQuery

Вот простой код, с которым я работаю:

$("#friend_search").keyup(function() {

    if($(this).val().length > 0) {
        obtainFriendlist($(this).val());
    } else {
        obtainFriendlist("");
    }

});

function obtainFriendlist(strseg) {

    $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       data: "search="+strseg,
       success: function(msg){
        UIDisplayFriends(msg);
       }
     });
}

По сути, если событие keyup запускается до того, как функция getFriendlist возвращает результат (и запускает UIDisplayFriends (msg), мне нужно отменить запрос на рейс. Проблема, с которой я столкнулся, заключается в том, что они создаются, а затем внезапно функция UIDisplayFriends запускается повторно.

Большое спасибо, и совет тоже полезен

Ответ 1

Возвращаемое значение $.ajax - это объект XHR, на который вы можете называть действия. Чтобы прервать функцию, вы должны сделать что-то вроде:

var xhr = $.ajax(...)
...
xhr.abort()

Может быть разумно добавить некоторое debouncing, чтобы облегчить нагрузку на сервер. Следующее будет отправлять только вызов XHR только после того, как пользователь перестанет печатать на 100 мс.

var delay = 100,
    handle = null;

$("#friend_search").keyup(function() {
    var that = this;
    clearTimeout(handle);
    handle = setTimeout(function() {
        if($(that).val().length > 0) {
            obtainFriendlist($(that).val());
        } else {
            obtainFriendlist("");
        }
    }, delay);
});

Третья вещь, которую вы действительно должны делать, - это фильтрация ответов XHR на основе того, действительно ли запрос остается действительным:

var lastXHR, lastStrseg;

function obtainFriendlist(strseg) {
    // Kill the last XHR request if it still exists.
    lastXHR && lastXHR.abort && lastXHR.abort();

    lastStrseg = strseg;
    lastXHR = $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       data: "search="+strseg,
       success: function(msg){

        // Only display friends if the search is the last search.
        if(lastStrseg == strseg) 
          UIDisplayFriends(msg);
       }
     });
}

Ответ 2

Как насчет использования переменной, скажем, isLoading, которую вы установили в true, используя параметр beforeSend (jqXHR, settings) для .ajax, а затем используя полный параметр, чтобы вернуть переменную значение false. Затем вы просто проверяете эту переменную перед запуском другого вызова ajax?

var isLoading = false;
$("#friend_search").keyup(function() {

    if (!isLoading) {
       if($(this).val().length > 0) {
           obtainFriendlist($(this).val());
       } else {
           obtainFriendlist("");
       }
    }

});

function obtainFriendlist(strseg) {

    $.ajax({
       type: "GET",
       url: "getFriendlist.php",
       beforeSend: function () { isLoading = true; },
       data: "search="+strseg,
       success: function(msg){
        UIDisplayFriends(msg);
       },
       complete: function() { isLoading = false; }
     });
}