jQuery - 停止 ajax 请求答案

【问题标题】：jQuery - Stop ajax requestsjQuery - 停止 ajax 请求
【发布时间】：2013-12-12 23:23:08
【问题描述】：

（我真的不知道如何命名，请随时提出修改建议）

考虑以下示例 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 请求可能仍在等待响应。当然，新的内容也还没有显示出来；然而，几秒钟后，所有的请求都有机会完成，然后用户就会被大量的新内容同时显示出来。

我所追求的是一种在单击 .icon 时简单地停止执行任何先前的 click 绑定的方法，以便最终仅完成最近的单击。

我知道我可以让我的 AJAX 调用同步，但我希望有一种更好的方法，不会占用用户的浏览器。我的 jQuery 已经够用了，但这比我习惯的要深入一些。

【问题讨论】：

标签： javascript jquery ajax

【解决方案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;

并且您可能希望向用户提供一些通知，告知呼叫处于活动状态或上次呼叫已取消，以便他们知道发生了什么。给他们一个好的用户体验，这样他们就不会随意点击。

【讨论】：

+1 因为预防永远是最好的方法。但是，如果 OP 更喜欢中止先前的 AJAX 调用 - 正如他指定执行最近的点击一样 - 他可能也想检查一下：stackoverflow.com/a/446626/2600397
我肯定更喜欢停止/中止，因为它不是限制用户，而是让用户做他想做的事并处理它。
请记住，不仅要停止 AJAX，还可能有动画（在 displayNewContent 内）。每个都需要单独明确停止吗？
嗯，取决于你想要完成的事情，你应该停止所有正在移动的东西。我强烈建议你走“预防”的路。
您可以添加一个通用类并调用stop() 或以第一种方式进行，直到一切都完成后才发出请求。由你决定。

【解决方案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
}

【讨论】：