Код Javascript работает только при отладке

Question

Я использую Twitch api, чтобы проверить, выбраны ли выбранные каналы онлайн или офлайн. Имеет странную ошибку. Код работает только при отладке скрипта в инструментах dev. Я что-то пропустил?

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

      }); 
     }; 

    }) 

Вот полный код http://codepen.io/nikasv/pen/GqRMXq

Answer 1

$.getJSON() является асинхронным. Таким образом, завершение обратного вызова называется некоторое время спустя. Ваш цикл for выполняется до конца, а затем, когда вызывается обратный вызов, i устанавливается в конец цикла for.

Отладка может изменить сроки вещей.

Вы можете исправить вещи, встраивая счетчик цикла в IIFE так будет однозначно запечатлены для каждой итерации цикла for, как это:

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

Или, вы можете использовать .forEach(), что делает внутреннюю функцию для вас:

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

Answer 2

Я думаю, что вы забыли включить JQuery в код

Если открыть консоль это, скажем, $ не определен. Добавьте jquery, и он будет работать нормально.

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

Answer 3

Вы не добавили JQuery на странице (Настройки - JavaScript - быстро-надстройку - Jquery - закрыть)

После - все работает отлично (_http: //codepen.io/anon/pen/ xOxXQN)