如何创建一些 ajax 调用完成后触发的事件？答案

【问题标题】：How to create event triggered after a some ajax calls completed?如何创建一些 ajax 调用完成后触发的事件？
【发布时间】：2010-11-29 13:33:08
【问题描述】：

请帮我为我的情况创建正确的事件。我相信有 真正的方法，无需任何计数器（如：How to know when all ajax calls are complete）

HTML：

<ul id="links">
    <li><a href="1.html">What is Yoda's first name?</a></li>
    <li><a href="2.html">Why does Padme die?</a></li>
    <li><a href="3.html">Who is Darth Rage?</a></li>
</ul>
<div id="content"></div>

jQuery:

$('#links a').each(function (index, el) {
    url = $(el).attr('href');
    $('<div class="article" />').appendTo('#content')
        .load(url, function(){
            filterOneArticle(this);
        });
});

// I want this function run after all articles will be loaded and filtered 
$.bind('yepAllArticlesHaveBeenLoaded', filterAllArticles);

filterAllArticles = function() {};
filterOneArticle = function(el) {};

【问题讨论】：

标签： javascript jquery ajax javascript-events event-handling

【解决方案1】：

如果出于某种原因您不想像 Nick 建议的那样使用 ajaxStop（也许您担心其他不相关的 ajax 请求会让您失望），您可以跟踪您发出了多少请求并检查每个人何时成功/失败：

var requestCount = 0;
$('#links a').each(function (index, el) {
    url = $(el).attr('href');
    ++requestCount;
    $('<div class="article" />').appendTo('#content')
        .load(url, function(){
            filterOneArticle(this);
            --requestCount;
            if (requestCount == 0) {
                filterAllArticles();
            }
        });
});

看起来它有一个竞争条件（如果第一篇文章在我们请求第二篇文章之前完成加载怎么办？），但它没有。浏览器上的 JavaScript 是单线程的（除非使用 web workers，您必须明确地这样做），因此我们知道我们将在第一次完成之前完成启动请求的循环。

【讨论】：

非常感谢，现在我确定除了计数器之外别无他法。

【解决方案2】：

这里有一个ajaxStop 全局事件：

$(document).ajaxStop(filterAllArticles);

要取消绑定，使其在下一个 ajax 批处理完成时不会运行（如果以后有任何 ajax 活动），您可以在 filterAllArticles 方法中调用 .unbind()：

$(document).unbind("ajaxStop", filterAllArticles);

【讨论】：

哦，谢谢，当只有那些 ajax 请求时它工作得很好。但是想象一下还有其他请求，例如图片库等。ajaxStop 只有在所有请求完成后才会被触发，但我需要在文章加载后过滤文章。
@pereskokov - 如果你只需要它来处理文章并且同时有请求，那么使用计数器，你别无选择。
非常感谢，现在我确定除了计数器之外别无他法。

【解决方案3】：

jQuery 支持这种行为。您可以使用 jQuery 进行 ajax 调用，如下所示。该方法有成功和失败两个回调函数。

function loadData()
{
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: 'methodurl',
        success: methodSuccedded,
        error: methodFailure
    });
}

function methodSuccedded()
{}

function methodFailure()
{}

【讨论】：

谢谢，但我知道。我的意思是其他。