Javascript code runs only when debugging

Question

I am on using Twitch api to check if selected channels are online or offline. Having a weird bug. Code works only when debugging the script in dev tools. Am I missing anything?

$(document).ready(function() {
        var channels = ["OgamingSC2","sheevergaming", "ESL_SC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
        for (var i = 0; i < channels.length; i++) {
            $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?', function(data) {
                if (data.stream) {
                    $('.wrapper li').eq(i).css('background-color', "blue");
                } else {
                    $('.wrapper li').eq(i).css('background-color', "red");
                }

            });
        };

    })

Here is the full code http://codepen.io/nikasv/pen/GqRMXq

Answer 1

$.getJSON() is asynchronous. As such, it's completion callback is called some time later. Your for loop runs to the end and then when the callback is called, i is set to the end of the for loop.

Debugging may changing the timing of things.

You can fix things by embedding the loop counter in an IIFE so it will be uniquely captured for each iteration of the for loop like this:

$(document).ready(function() {
      var channels = ["OgamingSC2","sheevergaming", "ESL_SC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
      for (var i = 0; i < channels.length; i++) {
          (function(index) {
            $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[index] + '?callback=?', function(data) {
                if (data.stream) {
                    $('.wrapper li').eq(index).css('background-color', "blue");
                } else {
                    $('.wrapper li').eq(index).css('background-color', "red");
                }
            });
          })(i);
      }
 });

Or, you can use .forEach() which makes the inner function for you:

$(document).ready(function() {
      var channels = ["OgamingSC2","sheevergaming", "ESL_SC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
      channels.forEach(function(item, index) {
            $.getJSON('https://api.twitch.tv/kraken/streams/' + item + '?callback=?', function(data) {
                if (data.stream) {
                    $('.wrapper li').eq(index).css('background-color', "blue");
                } else {
                    $('.wrapper li').eq(index).css('background-color', "red");
                }
            });
       });
 });