如何在ajax中使用Jquery $ .each（）

Question

我正在尝试将SMS从对象发送给收件人。
jQuery的每个循环在继续之前都等待ajax成功吗？

我希望我的脚本发送一个SMS并将成功文本附加到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 Promise，并在它们全部解决后执行所有必要的操作。

// 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');
});