ajax関数でリクエストを1つずつ処理するにはどうすればよいですか？

Question

名前にIDの名前のついたツイッチチャンネルがあり、結果が得られない場合は、正しいステータスをチャンネルに帰属させて「オフライン」にしたいと思っています。どのチャンネルがどのステータスがかなりランダムであるかを除いて、すべて正常に動作します。ほとんどの場合、最後のものが影響を受ける唯一のものです。 .ajaxに一度に1つのリクエストを行うにはどうすればよいですか？ （私はすでにasync：falseを入れてみました）

$(document).ready(function() { 
    var names = []; 
    var status = 'Offline'; 
    var iconColor = "#B00"; 

    $('.channel').each(function(index) { 
    names.push($(this).attr('id')); 
    }); 

    $(".channel").each(function(index) { 
    iconColor = "#B00"; 
    $(this).html('<div class="iconStatus col-md-1"><i class="fa fa-television" aria-hidden="true"></i></div><a href="https://www.twitch.tv/' + names[index] + '"><div class="nameChannel col-md-3"></div></a><div class="status col-md-8">Offline</div>'); 
    $(this).children("a").children(".nameChannel").text(names[index]); 
    $.ajax({ 
     url: 'https://wind-bow.glitch.me/twitch-api/streams/' + names[index], 
     dataType: 'jsonp', 
     type: 'GET', 
     async: false, 
     jsonpCallback: 'JSON_CALLBACK', 
     success: function(data) { 
     if (data.stream !== null) { 
      assignProps(names[index], data.stream.channel.status, '#0B0'); 
     } 
     } 
    }); 
    }); 
}); 

function assignProps(name, status, iconColor) { 
    $('#' + name).children('.status').text(status); 
    $('#' + name).children('.iconStatus').children('i').css('color', iconColor); 
}; 

Answer 1

私はasyncとjsonpCallbackを削除しました。理由は、非同期のため、要求は要求時間の間ブラウザをフリーズするためです。 jsonpCallbackはjQueryによって維持されるため、設定する必要はありません。

namesをonloadハンドラからグローバルスコープに移動し、nameIndexを追加して次にストリームデータをフェッチする名前を追跡しました。

その後、代わりに二$(".channel").each(function(index)で各チャンネルごとにAJAXを呼び出すので、私はnameIndexに基づいてnamesについては、次の名前のためにそれを呼び出しますし、それが最後のAjaxリクエストのcompleteハンドラに自分自身を呼び出す機能fetchStreamを作った、それは意味errorまたはsuccessのいずれかで呼び出されます。 errorを処理してnameIndexを減らし、fetchStreamを呼び出すと同じインデックスを再度要求しますが、毎回エラーが発生する場合は無限ループに落とされないように注意してください。

var names = []; 
 
var nameIndex = 0; 
 

 
$(document).ready(function() { 
 
    var status = 'Offline'; 
 
    var iconColor = "#B00"; 
 

 
    $('.channel').each(function(index) { 
 
    names.push($(this).attr('id')); 
 
    }); 
 

 
    $(".channel").each(function(index) { 
 
    iconColor = "#B00"; 
 
    $(this).html('<div class="iconStatus col-md-1"><i class="fa fa-television" aria-hidden="true"></i></div><a href="https://www.twitch.tv/' + names[index] + '"><div class="nameChannel col-md-3"></div></a><div class="status col-md-8">Offline</div>'); 
 
    $(this).children("a").children(".nameChannel").text(names[index]); 
 
    }); 
 
    
 
    fetchStream(); 
 
}); 
 

 
function fetchStream(){ 
 
    if(nameIndex < names.length){ 
 
    var name = names[nameIndex]; 
 
    console.log('Fetching for ' + name); 
 
    $.ajax({ 
 
     url: 'https://wind-bow.glitch.me/twitch-api/streams/' + name, 
 
     dataType: 'jsonp', 
 
     type: 'GET', 
 
     success: function(data) { 
 
     if (data.stream !== null) { 
 
      assignProps(name, data.stream.channel.status, '#0B0'); 
 
     } 
 
     }, 
 
     complete: function(){ 
 
     fetchStream(); 
 
     } 
 
    }); 
 
    
 
    nameIndex++; 
 
    } else { 
 
    console.log('Finished'); 
 
    } 
 
} 
 

 
function assignProps(name, status, iconColor) { 
 
    $('#' + name).children('.status').text(status); 
 
    $('#' + name).children('.iconStatus').children('i').css('color', iconColor); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="channel" id="lirik"></div> 
 
<div class="channel" id="yuuhi"></div> 
 
<div class="channel" id="esl_overwatch"></div>