デバッグ時のみJavascriptコードが実行されます

Question

Twitch apiを使用して、選択したチャンネルがオンラインかオフラインかを確認しています。奇妙なバグを持っています。コードは開発ツールのスクリプトをデバッグするときにのみ機能します。私は何か不足していますか？ここで

$(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ループの最後に設定されます。

デバッグは物事のタイミングを変えることがあります。

あなたはそれが一意にこのようなforループの反復ごとにキャプチャされるように、生命維持にループカウンタを埋め込むことによって物事を修正することができます：あなたは、内側の関数を作る.forEach()を使用することができ、

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

かあなたのために：

$(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を追加すると正常に動作します。 //codepen.io/anon/pen/：すべての罰金（_HTTPに動作します - 後

をあなたが（ - javascriptの - クイック追加 - - jqueryの近い設定）ページではjQueryを追加しませんでした

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

Answer 3

xOxXQN）