如何在 ajax 中使用 Jquery $.each()

Question

我正在尝试从一个对象向收件人发送 SMS。
Jquery 每个循环是否在继续之前等待 ajax 成功？

我希望我的脚本在继续下一个收件人之前发送一条短信并将成功文本附加到 DOM。当每个循环完成后，我想要一条成功消息。

var i = 1;
var count =  Object.keys( recipients ).length;

//LOOP threw recipients
$.each(recipients, function(nr, name){
    //SEND SMS
    $.ajax({
        url: 'php/sms_send.php',
        method: 'POST',
        data: {nr: nr, name: name, text: text},
        success: function(result){
            //ECHO STATUS
            $('<span>'+result+'</span><br>').appendTo('#recipients');

        },
        error: function(err){
            //console.log(err);
        }
    }); //AJAX

     //LAST ROW?
    if(count === i){
        //DISABLE BTN
        $('#send_sms_btn').removeClass('disabled');
        $('#send_sms_btn').text('Skicka');
        //ECHO STATUS
        $('<span class="text-success">Klar!</span><br>').appendTo('#recipients');
    }
    else{
        i++;
    }
}); //EACH

计数不正确，我想知道每个是在等待 ajax 还是只是在运行？

我怎样才能使这个工作流程更好？

Answer 1

你不需要一个乱七八糟的计数。

只需聚合$.ajax() 返回的 jqXHR 承诺，并在它们全部解决后执行任何必要的操作。

// map recipients to promises
var promises = $.map(recipients, function(name, nr) {
    // return a jqXHR promise
    return $.ajax({
        'url': 'php/sms_send.php',
        'method': 'POST',
        'data': { 'nr': nr, 'name': name, 'text': text }
    }).then(function(result) {
        $('<span>' + result + '</span><br/>').appendTo('#recipients');
    });
});

// now aggregate the promises
$.when.apply($, promises).then(function() {
    // arrive here when all promises have resolved
    $('#send_sms_btn').removeClass('disabled').text('Skicka');
    $('<span class="text-success">Klar!</span><br>').appendTo('#recipients');
});