Ajax中止不會中止點擊，並重復請求

我有一個簡單的聊天與長輪詢完成。該聊天包含2行對話（或更多）。每行都有一個唯一的ID和一些要顯示的消息。當我點擊第一行時，爲了顯示這個對話的消息，我開始了一個ajax，並且它保持在服務器端的循環內部。但是，當我點擊第二行時，我需要結束以前的ajax並開始一個新的。Ajax中止不會中止點擊，並重復請求

我嘗試了一些選項，如下面的，但我沒有找到解決方案。

$('li.chat-conversation').on('click', function(){ 
var requestRunning = true; 
var xhr; 
var id = $(this).attr('data-conversation-id'); 

var ajaxOpt = {...}; 

var fn = function(){ 
    xhr = $.ajax(ajaxOpt); 
    if(requestRunning){ 
     xhr.abort(); 
     requestRunning = false; 
    } 
}; 
var interval = setInterval(fn, 2000); 
});

任何人都可以幫我找出一個邏輯嗎？
注意：setInterval僅作爲示例。

來源

2016-12-29 AD Henrique

可能重複的[使用jQuery中止Ajax請求]（http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery） – merlin2011

爲什麼不只是檢查'xhr .readystate'的值，如果它不是'4'，則放棄請求？使用自己的布爾標誌跟蹤活動請求可能很容易失去同步，這就是爲什麼我們首先具有'readystate'屬性。 –

@ScottMarcus但是我需要一個請求來保持活動狀態，只有當我點擊另一行時才中止，使用readstate有可能嗎？ –

事實證明，服務器響應是通過「append」插入到div中的。當我點擊另一個對話時，他們同時運行ajax。並且div正在更改內容，即在請求中，追加第一個對話的消息和另一個請求的，附加第二個對話的消息。

只需選中xhr.readystate值，如果它不是4，中止請求，並清除與該請求的對話。

如果您未在所有正確的位置設置標誌，使用您自己的布爾標誌跟蹤活動請求可能很容易與多個請求不同步。但readystate屬性使它，所以我們不必管理任何。

另外，當您取消AJAX請求時，您可能需要取消間隔計時器。

$('li.chat-conversation').on('click', function(){ 
    var xhr = null; 
    var id = $(this).attr('data-conversation-id'); 

    var ajaxOpt = {...}; 

    var fn = function(){ 
    xhr = $.ajax(ajaxOpt); 

    // Just check the readystate and if it's not 4 (DONE), 
    // then cancel the current request. 
    if(xhr.readystate !== 4){ 

     // Cancel the previous AJAX call(s) 
     xhr.abort(); 

     // Clear out the conversation related to the request 
     yourConversationDiv.textContent = ""; 

    } else if(xhr.readystate === 4 && xhr.status === 200){ 

     // Successful result, append to existing conversation 
     yourConversationDiv.append(xhr.responseText); 

    } 
    }; 
});

來源

2016-12-29 21:09:45

這是第一次如果。 Readystate未定義。雖然準備好** S ** tate的值爲1.奇怪... –

@ADHenrique您正在使用JQuery XHR包裝器，我正在使用本機XMLHttpRequest對象。在JQuery中，它是'readyState'，就像你發現的那樣。 –

是的。但值是1 :( –

移動xhr的單擊處理範圍之內，並檢查它是否存在於click事件：

var xhr = null; 

$('li.chat-conversation').on('click', function() { 
    var id = $(this).data('conversation-id'); 

    var ajaxOpt = {...}; 

    // when ajax request finished (does not matter success or failed) 
    ajaxOpt.complete = function() { 
    xhr = null; 
    }; 

    if(xhr) { 
    xhr.abort(); 
    } 
    xhr = $.ajax(ajaxOpt); 
});

附：擴展我的例子自己（：

來源

2016-12-29 21:12:13 num8er

Ajax中止不會中止點擊，並重復請求

回答

相關問題