jQuery-停止Ajax請求

Question

（我真的不知道該如何命名，隨時建議進行修改）

考慮以下示例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將執行AJAX請求，並通過在頁面上顯示其他.item內容來完成。

如果在這種情況下用戶連續快速單擊每個.item ，則來自.item單擊的AJAX請求可能仍在等待響應。 當然，新內容也不會顯示。 但是，幾秒鍾之后，所有請求都有機會完成，然后，用戶就被大量一次性顯示的新內容所困擾。

我所追求的是一種簡單的方法，如果click了.icon將停止執行任何先前的click綁定，從而僅最終完成最近的單擊。

我知道我可以使我的AJAX呼叫同步，但是我希望有一種更好的方法，不會占用用戶的瀏覽器。 我的jQuery很不錯，但是這比我以前更深入。

Answer 1

你有兩個選擇

您可以取消以前打開的Ajax調用

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

要么

您可以設置一個“活動”標志，直到最后一個標志完成后才能撥打電話

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

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

isActive = false;

您可能想給用戶一些通知，通知該呼叫正在進行中或上一個呼叫被取消，以便他們知道發生了什么。 給他們一個好的UX，這樣他們就不會隨機點擊。

Answer 2

首先，您必須取消綁定click ：

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

然后在具有$.ajax方法的complete事件中再次將其綁定：

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