jQuery的 - 停止Ajax請求

（我真的不知道該怎麼這個題目，隨意提出修改建議並）jQuery的 - 停止Ajax請求

考慮下面的示例HTML：

<div class="grid"> 
    <div class="item"><span class="icon"></span></div> 
    <div class="item"><span class="icon"></span></div> 
    <div class="item"><span class="icon"></span></div> 
    <div class="item"><span class="icon"></span></div> 
    <div class="item"><span class="icon"></span></div> 
</div>

附加到每個.icon一些jQuery的：

<script type="text/javascript"> 
    jQuery('.icon').click(function(){ 
     runAjaxStuff(); 
     displayNewContent(); 
    }) 
</script>

概括地說，每個用戶點擊.icon時間，相應的親本.item將執行由d AJAX請求和完成在頁面上顯示額外的.item內容。

如果用戶在這種情況下要連續快速單擊.item中的每一個，則來自前一次點擊的AJAX請求可能仍在等待響應。當然，新內容也沒有顯示出來;然而，秒，所有的請求少數有機會完成之後，用戶然後用噸新內容的狂轟濫炸所顯示的一次。

我所追求的是一種簡單地停止執行任何以前的click綁定的方法，如果點擊一個.icon，以便只有最近的點擊最終完成。

我知道，我可以讓我的AJAX調用syncronous代替，但我希望不會抓住用戶的瀏覽器更好的辦法。我jQuery是足夠好度日，但是這是值得更深入一點比我已經習慣了。

來源

2013-12-12 pspahn

你有兩個選擇

可以取消打開

var xhr = null; 
jQuery('.icon').click(function() { 
    if (xhr && && xhr.readystate != 4) { 
     xhr.abort(); 
    } 
    runAjaxStuff(); 
    displayNewContent(); 
});

，並在你的Ajax調用，你會調用存儲到

xhr = $.ajax({ 
    url: 'ajax/progress.ftl', 
    success: function(data) { 
     //do something 
    } 
});

或

以前的Ajax調用

您可以設置一個「活動」標誌，並且直到最後一個人完成無法撥打電話

var isActive = false; 
jQuery('.icon').click(function() { 
    if (isActive) { 
     return; 
    } 
    isActive = true; 
    runAjaxStuff(); 
    displayNewContent(); 
});

，並在成功/錯誤/完成功能

isActive = false;

而且你可能想給用戶一些通知，要麼在呼叫活動，或者最後調用被取消只是讓他們知道發生什麼事。給他們一個好的用戶體驗，以免他們隨意點擊。

來源

2013-12-12 15:11:20 epascarello

+1因爲預防永遠是最好的方式。但是，如果OP寧願放棄以前的AJAX調用 - 因爲他的指定執行最近的點擊 - 他可能要對此進行確認：HTTP：//計算器。com/a/446626/2600397 –

我絕對更喜歡停止/放棄，只是因爲不是限制用戶，而是讓用戶做他想做的事情並對其進行處理。 –

請記住，不是簡單的AJAX停止，但可能還有動畫（在'displayNewContent'內部）。是否需要分別明確停止？ – pspahn

首先，你必須解除綁定click：

<script type="text/javascript"> 
    jQuery('.icon').click(function(){ 
     $('.icon').unbind('click'); // unbind click 
     runAjaxStuff(); 
     displayNewContent(); 
    }) 
</script>

然後在complete事件有$.ajax方法再次將其綁定：

complete: function() { 
    $('.icon').bind('click'); // will fire either on success or error 
}

來源

2013-12-12 15:15:45 fortegente

jQuery的 - 停止Ajax請求

回答

相關問題