ループ内のAjaxリクエスト

Question

配列を反復処理するためにこのforループを設定して、各チャンネルごとにサイクルを繰り返して各値のオブジェクトを取得できるようにしましたが、コードを解析するときには、ループの内側。ループ内で関数を作成せずにこの機能を使用するより適切な方法はありますか？この場合、https://codepen.io/Na-Ya/pen/EwrOYY

$(document).ready(function(){ 

var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]; 

for (var i=0; i<channels.length; i++){ 

$.ajax({ 
method: "get", 
url:"https://wind-bow.gomix.me/twitch-api/streams/" + channels[i], 
dataType: "jsonp", 
success: function(data){  
// if statement for offline channels 
if (data.stream === null){ 

    //sets offlineName to the channel name 
    var offlineName = data._links.channel.replace("https://api.twitch.tv/kraken/channels/", "").toLowerCase(); 

    $("#offline").append("<div class='row'>" + "<div class='col m-2'>" + "<h3>" + offlineName + ": Offline" + "</h3>" + "</div>" + "</div>");  
} 
else if (data.stream.channel !== null){ 

var channelName = data.stream.channel.display_name; 
var channelStatus = data.stream.channel.status; 
var channelLogo= data.stream.channel.logo; 
var channelUrl = data.stream.channel.url; 
var channelGame = data.stream.channel.game; 
    $("#online").append("<div class='row'>" + "<div class='col'>" + "<img class='mx-auto' src='" + channelLogo + "' alt='Logo'>" + "<h3>" + channelName + "</h3>" + "<a href='" + channelUrl + "'>" + "<p>" + channelGame + ": " + channelStatus + "</p>" + "</a>" + "</div>" + "</div>");    
}   
}, //closes out success function 
}); //closes out ajax request 
};//closes out for loop 
}); //closes out document ready 

Answer 1

、ループ内の関数は、ループの外に、という名前の関数として、それを書き込むことによって回避され、指定する名前を使用してすることができます：ここでは

はcodepenへのリンクです成功ハンドラとしての機能：

$(document).ready(function() { 
    var channels = ...; 
    function successHandler(data) { 
     ... 
    } 
    for (var i=0; i<channels.length; i++) { 
     $.ajax({ 
      'method': 'get', 
      'url': 'https://wind-bow.gomix.me/twitch-api/streams/' + channels[i], 
      'dataType': 'jsonp', 
      'success': successHandler 
     }); 
    } 
}); 

これは質問に答える必要があります。

さらに、書かれているように、sussessハンドラには無条件のelseが含まれていないため、data.stream === nullとdata.stream.channel === nullの場合、HTMLはビルド/表示されません。それは決して起こり得ないかもしれませんが、あなたは防衛的にプログラムするべきです - 常に最悪と仮定します。

ではなく、考えてみましょう：エラーによって

if (data.stream && data.stream.channel) { 
    // build HTML for the Channel 
} else { 
    // build HTML for offlineName 
}