Javascript code runs only when debugging

问题

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

回答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");
                }
            });
       });
 });

回答2:

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>

回答3:

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

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

来源：https://stackoverflow.com/questions/37507438/javascript-code-runs-only-when-debugging

标签

javascript

html

css

json

twitch