Javascript 使用承诺获取ajax数据

我一直在尝试让代码的其余部分在执行之前等待ajax调用的运行，因为我首先需要数组中的信息。我尝试过多种方法，但我不明白为什么它们不会。在这种情况下，使用承诺似乎是最好的做法。目前ajax仍然在.done和final console.log（3）之后运行

请参阅下面的代码：

$(document).ready(function(){
    var selectedChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var numberOfChannels = selectedChannels.length;
    var onlineChannels = [];
    var offlineChannels = [];

function getChannels(){

 for (var count = 0 ; count < numberOfChannels; count++) {

    $.ajax({
    url: "https://wind-bow.hyperdev.space/twitch-api/streams/"+ selectedChannels[count],
    type: "get",
    dataType: "jsonp",
    callback: "?",
      data: {
        }, 
        success: function(data) {
            if (data.stream) {
              var logo = data.stream.channel.logo
              var twitchName = data.stream.channel.display_name
              var details = data.stream.channel.status
              var link = data.stream.channel.url
              onlineChannels.push(twitchName);
              console.log(onlineChannels);
              console.log(1);

              $(".display-area").append("<div class=\"result-box online\"><img src="+ logo +" alt=\"twitchName\" class=\"profile-img\"></img><div class=\"title\">"+ twitchName +"</div><div class=\"description\">"+ details +"</div>");

            } 
        },
    }).done(function(){

    });
 }

 }

/* should run after ajax and onlineChannels array has been populated */
 function completeAjax() {
  var promised = getChannels();
  var promisedComplete = $.when(promised);
  promisedComplete.done(function(){
    console.log(onlineChannels);
    console.log(2);
  });
}

completeAjax();

console.log(3)
});

$（文档）.ready（函数（）{
var SelectedChannel=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2Injas”]；
var numberOfChannels=selectedChannels.length；
var OnlineChannel=[]；
var离线通道=[]；
函数getChannels（）{
对于（变量计数=0；计数

您可以映射ajax调用并返回承诺，然后使用

$.when.apply

检查所有ajax调用是否已完成

$(document).ready(function() {
    var selectedChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var onlineChannels   = [];
    var offlineChannels  = [];

    function getChannels() {
        return $.map(selectedChannels, function(channel, index) {
            return $.ajax({
                url      : "https://wind-bow.hyperdev.space/twitch-api/streams/" + channel,
                type     : "GET",
                dataType : "jsonp",
                callback : "?",
                data     : {}
            }).done(function(data) {
                if (data.stream) {
                    var logo       = data.stream.channel.logo;
                    var twitchName = data.stream.channel.display_name;
                    var details    = data.stream.channel.status;
                    var link       = data.stream.channel.url;

                    onlineChannels.push(twitchName);

                    $(".display-area").append("<div class=\"result-box online\"><img src=" + logo + " alt=\"twitchName\" class=\"profile-img\"></img><div class=\"title\">" + twitchName + "</div><div class=\"description\">" + details + "</div>");
                }
            });
        });
    }

    $.when.apply($, getChannels()).done(function() {
        // all done, onlineChannels populated
    });

});

$（文档）.ready（函数（）{
var SelectedChannel=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2Injas”]；
var OnlineChannel=[]；
var离线通道=[]；
函数getChannels（）{
return$.map（selectedChannels，函数（channel，index）{
返回$.ajax({
url:“https://wind-bow.hyperdev.space/twitch-api/streams/“+频道，
键入：“获取”，
数据类型：“jsonp”，
回调：“？”，
数据：{}
}).完成（功能（数据）{
if（data.stream）{
var logo=data.stream.channel.logo；
var twitchName=data.stream.channel.display\u name；
var详细信息=data.stream.channel.status；
var link=data.stream.channel.url；
在线频道。推送（twitchName）；
$（“.display area”）.append（“+twitchName+”“+details+”）；
}
});
});
}
$.when.apply（$，getChannels（））.done（函数（）{
//全部完成，在线频道已填充
});
});

您可以映射ajax调用并返回承诺，然后使用

$.when.apply

检查所有ajax调用是否已完成

$(document).ready(function() {
    var selectedChannels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var onlineChannels   = [];
    var offlineChannels  = [];

    function getChannels() {
        return $.map(selectedChannels, function(channel, index) {
            return $.ajax({
                url      : "https://wind-bow.hyperdev.space/twitch-api/streams/" + channel,
                type     : "GET",
                dataType : "jsonp",
                callback : "?",
                data     : {}
            }).done(function(data) {
                if (data.stream) {
                    var logo       = data.stream.channel.logo;
                    var twitchName = data.stream.channel.display_name;
                    var details    = data.stream.channel.status;
                    var link       = data.stream.channel.url;

                    onlineChannels.push(twitchName);

                    $(".display-area").append("<div class=\"result-box online\"><img src=" + logo + " alt=\"twitchName\" class=\"profile-img\"></img><div class=\"title\">" + twitchName + "</div><div class=\"description\">" + details + "</div>");
                }
            });
        });
    }

    $.when.apply($, getChannels()).done(function() {
        // all done, onlineChannels populated
    });

});

$（文档）.ready（函数（）{
var SelectedChannel=[“ESL_SC2”、“OgamingSC2”、“cretetion”、“freecodecamp”、“storbeck”、“habathcx”、“RobotCaleb”、“Noobs2Injas”]；
var OnlineChannel=[]；
var离线通道=[]；
函数getChannels（）{
return$.map（selectedChannels，函数（channel，index）{
返回$.ajax({
url:“https://wind-bow.hyperdev.space/twitch-api/streams/“+频道，
键入：“获取”，
数据类型：“jsonp”，
回调：“？”，
数据：{}
}).完成（功能（数据）{
if（data.stream）{
var logo=data.stream.channel.logo；
var twitchName=data.stream.channel.display\u name；
var详细信息=data.stream.channel.status；
var link=data.stream.channel.url；
在线频道。推送（twitchName）；
$（“.display area”）.append（“+twitchName+”“+details+”）；
}
});
});
}
$.when.apply（$，getChannels（））.done（函数（）{
//全部完成，在线频道已填充
});
});

您可以使用计数器倒计时到零，以查看还有多少Ajax调用需要完成：

for (var count = 0 ; count < numberOfChannels; count++) {
    $.ajax({
        // ...
        success: function(data) {
            count--; // <!--------- decrease count
            // ...
        },
    }).done(function(){
        if (!count) { // <!--------- see if this was the last one finishing.
            // All Ajax done.
            // ...following tasks are initiated here.
            //
        }
    });
}

for（var count=0；countcount--；//您可以使用计数器倒计时到零，以查看还有多少Ajax调用需要完成：

for (var count = 0 ; count < numberOfChannels; count++) {
    $.ajax({
        // ...
        success: function(data) {
            count--; // <!--------- decrease count
            // ...
        },
    }).done(function(){
        if (!count) { // <!--------- see if this was the last one finishing.
            // All Ajax done.
            // ...following tasks are initiated here.
            //
        }
    });
}

for（var count=0；countcount--；//这里您有点不清楚，
done（）
方法已经在等待ajax调用完成了吗？不过，您在循环中有ajax调用，您真的是想等待它们全部完成吗？您好，是的，对不起，我需要完成ajax for循环的所有循环，然后再转到completeAjax（）中的代码函数。现在已经清楚了之后的内容。如果要在ajax调用完成后执行completeAjax函数，请将其放入完整部分。如果要循环并执行多个ajax调用，则需要使用jQuery.done功能。（将completeAjax函数放在jQuery done函数中。这里您有点不清楚，
done（）
方法已经在等待ajax调用完成了吗？不过，您在一个循环中有ajax调用，您真的是想等待它们全部完成吗？您好，是的，对不起，我需要ajax的所有循环来完成