Jquery .ajaxを使用して機内AJAXリクエストをキャンセルしますか？

Question

可能性の重複：

$("#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イベントは、関数obtainFriendlistが戻る前に解雇された場合：ここでは
Kill Ajax requests using JavaScript using jQuery

は、私が働いている単純なコードです結果（そしてUIDisplayFriends（msg）をトリガする）、私は飛行中のリクエストをキャンセルする必要があります。私が持っていた問題は、彼らがbui ld up、そして突然関数UIDisplayFriendsが繰り返し起動されます。

はどうもありがとうございました、とアドバイスも変数を使用することについて、あなたはアヤックスのためbeforeSend（jqXHR、設定）オプションを使用して、使用してtrueに設定されていること、isLoadingを言う方法

Answer 1

戻り値$.ajaxは、アクションを呼び出すことができるXHRオブジェクトです。あなたのようなものだろう機能中止するには：

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

をサーバー上の負荷を軽減するだけでなく、いくつかのデバウンスを追加するスマートかもしれません。以下の例では、ユーザーが100msの間、タイピングを停止した後にのみ、XHR呼び出しを送信します。

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); 
}); 

あなたが本当にやるべき3つ目は、リクエストがまだ有効であるかどうかに基づいて、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); 
     } 
    }); 
} 

Answer 2

便利です変数を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; } 
    }); 
}