title: For loop proceeding out of order
body: <p>new at this, please tell me if I'm leaving information out or anything like that.</p>
  
  <p>The code I'm working on can be seen here: <a href="http://codepen.io/hutchisonk/pen/mVyBde" rel="nofollow">http://codepen.io/hutchisonk/pen/mVyBde</a> and I have also pasted the relevant section of javascript below.</p>
  
  <p>I'm having trouble understanding why this code is behaving as it is. Quick outline - I have defined a few variables at the top, made a function that fetches the data I need and builds it into a pretty little list. This seems to be working as planned.</p>
  
  <p>With the function outlined, I then loop through each "friend" in the "friends" array, calling the function once each time. I have numbered the friends on the output to help clarify what is going on. I have tried this a number of ways, including with the "for loop" syntax that's currently implemented, as well as the "forEach" syntax that's commented out.</p>
  
  <p>Two main questions:</p>
  
  <p>1) The number in front of each name is the "i" in my for loop. Why is this "i" not going in order from 0 to 10? How do I get it to do so? It appears to be in a different order every time the code is run. And, it repeats the numbers it has looped through previously on each new iteration. I would like to understand why this is happening.</p>
  
  <p>2) The code seems to be running out of order. The unexpected behavior can be seen in the console.log - the for loop outputs the first two lines of console.log on a loop, then jumps out and console.logs the test variable "a" and the other text below the for loop, and then jumps back into the for loop and console.logs the output from the function. I'm looking at the console in google chrome and I did read that there can be timing inconsistancies with regard to the console, but I don't understand how the loop is being split in half - the first two lines, and then the function call being logged after the later code.</p>
  
  <p>What is the best way to iterate through an array? Any insights on how to call a function within a loop correctly or resources you can provide are much appreciated.</p>
  
  <pre><code>$("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+= "&lt;li class='streaming'&gt;&lt;a href='twitch.tv/"+eachfriend+"'&gt;"+number+": "+eachfriend;
        html +="&lt;i class='fa fa-play-circle style='font-size:20px;color:green;''&gt;&lt;/i&gt;";
      } else if (result.stream === null) {
        html+= "&lt;li class='not_streaming'&gt;&lt;a href='twitch.tv/"+eachfriend+"'&gt;"+number+": "+eachfriend;
        html +="&lt;i class='fa fa-stop-circle' style='font-size:20px;color:red;'&gt;&lt;/i&gt;";
      }
       html +="&lt;/a&gt;&lt;/li&gt;";
      $("#all ul").append(html);
  
      }//success
    });//$ajax
  }//getstreamingdata function
  
  
  for (var i=0;i&lt;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
  </code></pre>