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

jfriend00 · Accepted Answer · 2016-05-29T08:16:59.330

$.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");
                }
            });
       });
 });

A less awkward solution would be to just use `channels.forEach(function(index) { ... });` — Patrick Roberts, May 29 '16 at 07:54
@PatrickRoberts - Good idea. I added that option to my answer. — jfriend00, May 29 '16 at 08:17

score 0 · Answer 2 · answered May 29 '16 at 07:51

0

I think you forgot to include jquery in your code

If you open console it say $ is not defined. Add jquery and it will work fine.

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

answered May 29 '16 at 07:51

Rahul Arora

4,503
1
16
24

score 0 · Answer 3 · answered May 29 '16 at 07:51

0

You didn't add jquery at page ( Settings - javascript - quick-add - jquery - close )

After - all works fine ( _http://codepen.io/anon/pen/xOxXQN )

answered May 29 '16 at 07:51

Vasiliy vvscode Vanchuk

7,007
2
21
44

Javascript code runs only when debugging

3 Answers3

Linked