For循环顺序混乱

Question

这是新问题，请告诉我是否遗漏了信息或类似信息。

我正在处理的代码可以在这里找到： http : //codepen.io/hutchisonk/pen/mVyBde，并且我还粘贴了以下javascript的相关部分。

我无法理解为什么这段代码仍然如此。 快速概述-我在顶部定义了一些变量，创建了一个函数，该函数可提取所需的数据并将其构建为一个很小的列表。 这似乎正在按计划进行。

概述了函数后，我然后遍历“ friends”数组中的每个“ friend”，每次调用一次该函数。 我在输出中给朋友编号，以帮助弄清发生了什么。 我已经尝试了许多方法，包括当前实现的“ for循环”语法以及已注释掉的“ forEach”语法。

两个主要问题：

1）每个名称前面的数字是我的for循环中的“ i”。 为什么这个“ i”不按从0到10的顺序排列？ 我该怎么做呢？ 每次运行代码时，它的顺序似乎都不同。 并且，它会在每次新迭代中重复之前循环遍历的数字。 我想了解为什么会这样。

2）代码似乎顺序混乱。 在console.log中可以看到意外的行为-for循环在循环上输出console.log的前两行，然后跳出并console.log记录测试变量“ a”和for循环下面的其他文本，然后跳回for循环和console.log记录该函数的输出。 我正在看谷歌浏览器中的控制台，但确实读到了关于控制台的时序不一致的信息，但是我不明白循环是如何分成两半的-前两行，然后是函数在后面的代码之后记录呼叫。

遍历数组的最佳方法是什么？ 非常感谢您对如何正确地在循环内调用函数或提供的资源有任何见解。

$("document").ready(function(){

  var friends = ["lainzero", "freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "dtphase", "MedryBW"];
  var html = "";
  var url = "";

  function getStreamingData(eachfriend, number) {
     url = "https://api.twitch.tv/kraken/streams/"+eachfriend;

  $.ajax({
  dataType: "jsonp",
  url: url,
  success: function(result) {
      console.log(result+", "+result.stream);

    if(result.stream !== null) {
      html+= "<li class='streaming'><a href='twitch.tv/"+eachfriend+"'>"+number+": "+eachfriend;
      html +="<i class='fa fa-play-circle style='font-size:20px;color:green;''></i>";
    } else if (result.stream === null) {
      html+= "<li class='not_streaming'><a href='twitch.tv/"+eachfriend+"'>"+number+": "+eachfriend;
      html +="<i class='fa fa-stop-circle' style='font-size:20px;color:red;'></i>";
    }
     html +="</a></li>";
    $("#all ul").append(html);

    }//success
  });//$ajax
}//getstreamingdata function


for (var i=0;i<friends.length;i++) {
  console.log(i);
  console.log(friends[i]);
  getStreamingData(friends[i], i);
} 

//Same as for loop above, but using forEach. This produces the same results.
/*
var i=0;
friends.forEach(function(friend) { 
   getStreamingData(friend, i);
   i++;
});    
  */

  var a = 4;//testing console output
  console.log(a);
  console.log("why is this showing up before the getStreamingData function's console output?");
  console.log("but it's showing up after the console.log(i) and console.lg(friends[i]) output? So this section is interupting the for loop above");
  console.log(" and why is the for loop out of order and repeating itself?");

 });//doc ready

Answer 1

您正在循环中执行异步任务。 您不应期望这些异步任务按启动顺序完成。

函数getStreamingData是我正在谈论的函数。

相关： JavaScript中的循环异步

这是我很久以前写的一个片段，现在仍在小型项目中使用。 但是，有许多库可以执行相同的操作，还有更多的库。

Array.prototype.forEachAsync = function (cb, end) {
    var _this = this;
    setTimeout(function () {
        var index = 0;
        var next = function () {
            if (this.burned) return;
            this.burned = true;
            index++;
            if (index >= _this.length) {
                if (end) end();
                return;
            }
            cb(_this[index], next.bind({}));
        }
        if (_this.length == 0) {
            if (end) end();
        }else {
            cb(_this[0], next.bind({}));
        }
    }, 0);
}

这样触摸prototype并不是一个好习惯。 但是，只是为了让您了解如何执行此操作。在该代码之后，您可以异步循环数组。 完成一个元素的操作后，请调用next 。

var array = [1, 2, 3, 4]
array.forEachAsync(function (item, next) {
    // do some async task
    console.log(item + " started");
    setTimeout(function () {
        console.log(item + " done");
        next();
    }, 1000);
}, function () {
    console.log("All done!");
});