代码之家 › 专栏 › 技术社区 › Jason Axelrod

jQuery+.each()+.post()…是否同步运行?

jquery

Jason Axelrod · 技术社区 · 6 年前

我有一个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 是真的
收集几条数据
address

当文章完成后,它会在文章中添加一个fa-check-circle-o标记

我的问题是函数同时运行,而不是一个接一个地运行。我怎样才能让它等待每一行完成,然后再进入下一行?

我也希望它添加一个fa感叹号三角形标记到元素失败,以及标记 过程 false 所以它会跳过所有未来的行。。。但我不知道如何抓住失败的岗位。

3 回复 | 直到 6 年前

But those new buttons though.. 6 年前

您可以简单地创建一个要迭代的元素数组,然后在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/

Vijendra Kumar Kulhade 6 年前

确保您使用的是ECMA6。我不确定它是否也同样适用于ECMA5。

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

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

            $.post(address, input, function(data)
            {
                promises[index] = Promises.resolve(data);
            });
        }
        else
        {
            $fa.addClass('fa-exclamation-triangle');
        }
    });
    $(promises).each(function(){ 
     this.then(function(value){
        $fa.addClass('fa-check-circle-o');
    });
    });

ESR 6 年前

试着通过考试 async 选件组件 false 当使用jqueryajax时(我稍微修改了一下格式,因为它让我很烦):

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

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

        $.ajax({
            type: 'POST',
            url: address,
            data: input,
            async: false,
            success: function(data) {
                $fa.addClass('fa-check-circle-o');
            }
        });
    } else {
        $fa.addClass('fa-exclamation-triangle');
    }
});