ajaxデータを取得する約束を使用する

Question

私は配列の情報が必要なときに実行する前にajax呼び出しが実行されるのを待つために、残りのコードを取得しようとしています。私は複数のアプローチを試みましたが、なぜそうしないのかわかりません。このような状況では、約束を使用するのがベストプラクティスであるようです。現在、ajaxは.doneと最後の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) 
}); 

Answer 1

あなたはAJAX呼び出しをマップし、約束を返し、その後、すべての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 
    }); 

}); 

Answer 2

はあなたが使用することができます完了していることを確認するために$.when.applyを使用することができますあなたのカウンターを0にカウントダウンして、まだ多くの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. 
      // 
     } 
    }); 
} 

この動作方法を理解するには、ループが終了する前にsuccessとdoneコールバックが呼び出されず、countが最大に達していることを理解することが重要です。それ以来、countは減少しています。