jQuery + .each() + .post()...同步运行？

Question

我有一个 HTML 表格。该表有几行。我正在运行 jQuery 代码，该代码扫描表，并为每一行运行一个 POST 请求。下面是我正在使用的代码...

首先，我们设置表，并从中获取一些数据:

$target = this.$target;

var process = true,
    eventID = $target.data('event'),
    address = $target.data('href');

然后我使用 .each() 迭代所有行

$target.find('.row').each(function()
{
    var $fa = $(this).find('.fa');

    if (process)
    {
        var input = {
            'eventID': eventID,
            'userID': $(this).data('user'),
            'seed': $(this).data('seed'),
        };

        $.post(address, input, function(data)
        {
            $fa.addClass('fa-check-circle-o');
        });
    }
    else
    {
        $fa.addClass('fa-exclamation-triangle');
    }
});

从上面的代码中可以看到，对于每一行，我做了几件事:

• 查找嵌套的.fa类元素
• 检查process是否为true
• 收集几项数据
• 将数据发布到地址

帖子完成后，它会在 .fa 元素中添加一个 fa-check-circle-o 标记。

我遇到的问题是所有 .each() 函数同时运行，而不是一个接一个地运行。如何让它等待完成每一行，然后再继续下一行？

我还希望它在失败时向元素添加一个 fa-感叹号-三角形标记，并将 process 标记为 false 以便它跳过所有 future 的内容行...但我不知道如何捕获帖子的失败。

Answer 1

您可以简单地创建一个要迭代的元素的数组，然后在 ajax 回调中连续调用它们。您可以使用 Promise interface此处根据请求的成功、失败或完成来触发操作:

var rows;
$(".button").on('click', function() {
    rows = $('.rows').toArray();
    var row = rows.shift();
    doAjax(row);
});
function doAjax(row) {
    $.post('ajax.php')
        .done(function() {
            // this runs on success
        })
        .fail(function() {
            // this runs on ajax failure
        })
        .always(function() {
            // this always runs
            // call next element in your array now...
            if (rows.length) {
                var row = rows.shift();
                doAjax(row);
            }
        });

}

这是一个有效的示例:http://so-ajax-each.dev.zuma-design.com/