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

时间:2018-01-28 09:24:43

标签: javascript jquery ajax each

我正在尝试从对象发送短信给收件人 在继续之前,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还是只是运行?

如何让这个工作流程变得更好?

1 个答案:

答案 0 :(得分:0)

你不需要麻烦的计数。

只需汇总$.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');
});