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，则前一次点击的AJAX请求可能仍在等待响应。当然，新内容还没有显示出来;然而，经过几秒钟后，所有请求都有机会完成，然后用户被大肆宣传，同时显示大量新内容。

如果点击click以便只有最近的点击最终完成，那么我所追求的是一种简单地停止执行任何先前.icon绑定的方法。

我知道我可以让我的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;

你可能想给用户一些通知，告知呼叫是活动的还是最后一次呼叫被取消，这样他们就知道发生了什么。给他们一个好的用户体验，这样他们就不会随意点击。

Answer 2

首先，您必须取消绑定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
}

jQuery - 停止ajax请求

2 个答案: