jQuery-停止ajax请求

jQuery - Stop ajax requests

本文关键字：请求 ajax 停止 jQuery-      更新时间：2023-09-26

（我真的不知道如何命名，可以随意建议编辑）

考虑以下示例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已经足够好了，但这比我习惯的要深入一些。

你有两个选择

您可以取消以前打开的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;

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

首先必须解除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
}
相关文章：