jQuery：计算 .each() 中 ajax 调用的成功次数答案

【问题标题】：jQuery: count number of successes of ajax calls inside .each()jQuery：计算 .each() 中 ajax 调用的成功次数
【发布时间】：2011-06-16 07:07:01
【问题描述】：

我需要计算一个 jQuery ajax 调用在列表中的每个项目上成功执行了多少次。

我从这里开始，但后来意识到这不起作用，因为 ajax 的“异步”部分：

var numSuccessfullUpdates = 0;

$('#saveMyListItems').click(function (event) {
    event.preventDefault();

    $('ul#myList li').each(function () {
        $.ajax({
            url: '[my_url]',
            type: "POST",
            data: {
                // [data block here, not relevant to question]
            },
            success: function () {
                numSuccessfullUpdates++;
            }
        });
    });
    if (successfullUpdates > 0){
        alert(numSuccessfullUpdates);
    }
});

有什么建议吗？

【问题讨论】：

您要等到它们全部完成吗？直到超时期限到期？
@Coding Freak：我测试过，然后实现了。
@faust：那么你得到了什么结论和结果？值总是 0 吗？
@justis：好问题。我会计算 li 的 -- n = $(this).find('li').length -- 一旦达到 n 成功就确认，或者如果达到超时并且 numSuccessfullUpdates 则发送成功计数
@Coding Freak：是的，计数始终为 0。

标签： jquery

【解决方案1】：

您可以尝试 jQuery 1.5+ 中提供的新 when() 和 then() 功能，

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).then(myFunc, myFailure);

这里在两个ajax请求都成功时执行函数myFunc，如果有一个错误则执行myFailure。

所以，通过上面的函数，如果myFunc函数运行，你可以检查所有的ajax请求是否成功完成。

【讨论】：

太棒了！ $.when() 功能非常强大。感谢您告诉我们。
好的，我已经包装好了 $('ul#myList li').each(...);在 $.when() 中设置成功和失败的 2 个函数。不过，警报显示为 0。这是变量范围问题吗？
你真的需要数数吗？还是检查所有 ajax 请求是否都运行就足够了？

【解决方案2】：

您可以对 AJAX 使用 complete 处理程序并计算状态结果，直到结果总数等于请求总数。这是示例代码，also available as a jsFiddle

$('#saveMyListItems').click(function (event) {
    event.preventDefault();

    var ajaxCounter = {
        goal: $('ul#myList li').length,
        total: 0,
        success: 0,
        notmodified: 0,
        error: 0,
        timeout: 0,
        abort: 0,
        parsererror: 0
    }

    $('ul#myList li').each(function () {
        $.ajax({
            url: '/echo/html',
            type: "POST",
            timeout: 1500,
            data: {
                html: "foobar",
                delay: Math.floor(Math.random() * 5)
            },
            complete: function (jqXHR, textStatus) {
                ajaxCounter.total++
                ajaxCounter[textStatus]++;
                if (ajaxCounter.total >= ajaxCounter.goal) {
                    alert(ajaxCounter.success + ' out of ' + ajaxCounter.total);
                }
            },
        });
    });
});

【讨论】：

请注意，随机延迟有时会超时而不是成功。不过，它似乎只适用于第一个请求？我对使用 jsFiddle 测试 AJAX 有点陌生。
我赞成@coding-freak 关于$.when() 的答案，因为它是一个更优雅的解决方案。不过，由于我已经基本完成了上面的示例，我认为您可能会喜欢另一种解决方案。
也许 coding-freak 的解决方案更优雅——我赞成它，因为知道这是一件好事——但你的解决方案是我要工作的。

【解决方案3】：

您还需要计算所有响应，并在达到总数或合理超时到期时发出警报。

【讨论】：