如何讓我的ajax函數逐一處理請求？

Question

我有一羣抽搐頻道，他們的名字是ID，想把正確的狀態歸於頻道，如果我沒有得到結果，就把它保持在「離線」狀態。這一切都可以正常工作，除了哪個渠道獲得哪種狀態幾乎是隨機的，大多數情況下最後一個是唯一受影響的。我怎樣才能讓.ajax一次只做一個請求？ （我已經嘗試把異步：假）

$(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

我已經刪除異步和jsonpCallback。原因是，對於異步，請求會凍結瀏覽器請求時間。 jsonpCallback由jQuery維護，所以不需要設置它。

我將names從onload處理程序移動到全局範圍，並添加了nameIndex來跟蹤我將接下來獲取流數據的名稱。

然後，而不是在第二$(".channel").each(function(index)呼籲AJAX對每個通道，我做了功能fetchStream，將基於nameIndex稱它爲下一名names，然後它會調用本身complete處理最後Ajax請求，這意味着它會自動調用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>