无法通过ajax调用获得正确的索引结果

Question

我试图通过变量showindex迭代'streamers'数组，但失败了，它只显示数组的第一个元素“monstercat”和最后一个元素“amazhs” ，在chrome和showindex中使用displayResult函数的调试总是为0和9，不知道为什么，有什么帮助？谢谢！

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
$(document).ready(function() { 
 
    var logo = ""; 
 
    var channelName = ""; 
 
    var showindex = 0; 
 

 
    streamers.forEach(function(streamer, index) { 
 
    showindex = index; 
 
    $.ajax({ 
 
     type: 'GET', 
 
     jsonp: "callback", 
 
     url: 'https://api.twitch.tv/kraken/streams/' + streamer, 
 
     headers: { 
 
     'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx' 
 
     }, 
 
     success: displayResult 
 
    }); 
 
    }); 
 

 
    function displayResult(data) { 
 
    var outstring = ""; 
 
    if (data.stream !== null) { 
 
     channelName = data.stream.channel.display_name; 
 
     logo = data.stream.channel.logo; 
 
    } else { 
 
     logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50"; 
 
     channelName = streamers[showindex]; 
 
    } 
 
    outstring += 
 
     "<li class='streamer'>" + 
 
     "<img class='streamer-icon' src='" + logo + "'/>" + 
 
     "<p class='streamer-name'>" + 
 
     "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" + 
 
     "<span class='streamer-status'>" + 
 
     "<i class='fa fa-exclamation'></i></span></li>" 
 
    $("#showBox").append(outstring); 
 
    } 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.tab-content { 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
} 
 

 
.streamer { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 

 
.streamer-icon { 
 
    width: 50px; 
 
} 
 

 
.streamer-name { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 

 
.streamer-status { 
 
    float: right; 
 
    padding-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row col-md-4 col-md-offset-4"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a> 
 
     </li> 
 
     <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a> 
 
     </li> 
 
     <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="all"> 
 
     <ul id="showBox"> 
 
     </ul> 
 
     </div> 
 
     <div class="tab-pane" id="online"> 
 
     <ul></ul> 
 
     </div> 
 
     <div class="tab-pane" id="offline"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

这是因为电话都在同一时间发生得如此迅速showindex = 9的方式解决这个是做的增量在displayResult虽然它仍然可能出问题（但它的不太可能）。

您可能完全可以更改您的代码以使其使用承诺，这将会更安全。

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
$(document).ready(function() { 
 
    var logo = ""; 
 
    var channelName = ""; 
 
    var showindex = 0; 
 

 
    streamers.forEach(function(streamer, index) { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     jsonp: "callback", 
 
     url: 'https://api.twitch.tv/kraken/streams/' + streamer, 
 
     headers: { 
 
     'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx' 
 
     }, 
 
     success: displayResult 
 
    }); 
 
    }); 
 

 
    function displayResult(data) { 
 
    var outstring = ""; 
 
    if (data.stream !== null) { 
 
     channelName = data.stream.channel.display_name; 
 
     logo = data.stream.channel.logo; 
 
    } else { 
 
     logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50"; 
 
     channelName = streamers[showindex]; 
 
    } 
 
    outstring += 
 
     "<li class='streamer'>" + 
 
     "<img class='streamer-icon' src='" + logo + "'/>" + 
 
     "<p class='streamer-name'>" + 
 
     "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" + 
 
     "<span class='streamer-status'>" + 
 
     "<i class='fa fa-exclamation'></i></span></li>" 
 
    $("#showBox").append(outstring); 
 
    showindex++; 
 
    } 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.tab-content { 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
} 
 
.streamer { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
.streamer-icon { 
 
    width: 50px; 
 
} 
 
.streamer-name { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 
.streamer-status { 
 
    float: right; 
 
    padding-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row col-md-4 col-md-offset-4"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a> 
 
     </li> 
 
     <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a> 
 
     </li> 
 
     <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="all"> 
 
     <ul id="showBox"> 
 
     </ul> 
 
     </div> 
 
     <div class="tab-pane" id="online"> 
 
     <ul></ul> 
 
     </div> 
 
     <div class="tab-pane" id="offline"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

这里是另一种方式来做到这一点，它不通过阵列使用的foreach但迭代的另一种方式。这种方式是有点慢，但意味着它没有得到的自身领先（你可以看到在每一个POP）

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
$(document).ready(function() { 
 
    var logo = ""; 
 
    var channelName = ""; 
 
    var showindex = 0; 
 

 
    //Work out if there are any streamers left in the array 
 
    function calcStreamers() { 
 
    if (showindex < (streamers.length - 1)) { 
 
     //if there are add 1 and go get it 
 
     showindex++; 
 
     streamersGet(); 
 
    } else { 
 
     //if not just stop 
 
     return false 
 
    } 
 
    }; 
 

 
    //The get function 
 
    function streamersGet() { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     jsonp: "callback", 
 
     url: 'https://api.twitch.tv/kraken/streams/' + streamers[showindex], 
 
     headers: { 
 
     'Client-ID': 'd50b88uvtwlhdfrqi3vj3k1hm3izkyx' 
 
     }, 
 
     success: displayResult 
 
    }); 
 
    }; 
 

 
    function displayResult(data) { 
 
    var outstring = ""; 
 
    if (data.stream !== null) { 
 
     channelName = data.stream.channel.display_name; 
 
     logo = data.stream.channel.logo; 
 
    } else { 
 
     logo = "https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50"; 
 
     channelName = streamers[showindex]; 
 
    } 
 
    outstring += 
 
     "<li class='streamer'>" + 
 
     "<img class='streamer-icon' src='" + logo + "'/>" + 
 
     "<p class='streamer-name'>" + 
 
     "<a href='http://twitch.tv/" + channelName + "' target='_blank'>" + channelName + "</a></p>" + 
 
     "<span class='streamer-status'>" + 
 
     "<i class='fa fa-exclamation'></i></span></li>" 
 
    $("#showBox").append(outstring); 
 
    //Once the data has been added to the page go and check if there are more to add 
 
    calcStreamers(); 
 
    } 
 
    //Initally start by getting the first result 
 
    streamersGet(); 
 
});

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.tab-content { 
 
    border: 1px solid #ddd; 
 
    border-top: none; 
 
} 
 
.streamer { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
} 
 
.streamer-icon { 
 
    width: 50px; 
 
} 
 
.streamer-name { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
} 
 
.streamer-status { 
 
    float: right; 
 
    padding-top: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row col-md-4 col-md-offset-4"> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
     <li class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">all</a> 
 
     </li> 
 
     <li><a href="#online" aria-controls="online" role="tab" data-toggle="tab">online</a> 
 
     </li> 
 
     <li><a href="#offline" aria-controls="offline" role="tab" data-toggle="tab">offline</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="all"> 
 
     <ul id="showBox"> 
 
     </ul> 
 
     </div> 
 
     <div class="tab-pane" id="online"> 
 
     <ul></ul> 
 
     </div> 
 
     <div class="tab-pane" id="offline"> 
 
     <ul></ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你想通过数组正确的迭代？

var streamers = ['monstercat', 'sivhd', 'cryaotic', 'nightblue3', 'picoca_lol', 'freecodecamp', 'trick2g', 'riotgamesbrazil', 'riotgames', 'amazhs']; 
 
     $(document).ready(function() { 
 
      $(streamers).each(function(index, streamer){ 
 
      console.log(streamer+" "+index); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>