Javascript代碼僅在調試時運行

我正在使用Twitch API來檢查選定的頻道是在線還是離線。有一個奇怪的錯誤。代碼僅在開發工具中調試腳本時起作用。我錯過了什麼？Javascript代碼僅在調試時運行

$(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

來源

2016-05-29 ginobiliiiiiiiiii

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

來源

2016-05-29 07:51:49 jfriend00

得方便的解決辦法是隻使用'channels.forEach（函數（指數）{...}）;' –

@ jfriend00很有意思，謝謝。 – ginobiliiiiiiiiii

@PatrickRoberts - 好主意。我將這個選項添加到我的答案中。 – jfriend00

我想你忘了，包括jQuery的代碼中的

如果你打開控制檯它說沒有定義$。添加jquery，它會正常工作。

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

來源

2016-05-29 07:51:27

你沒有在頁面中添加的jQuery（設置 - JavaScript的 - 快速添加 - jQuery的 - 接近）

後 - 一切工作正常（_http：//codepen.io/anon/pen/ xOxXQN）

來源

2016-05-29 07:51:44

Javascript代碼僅在調試時運行

回答

相關問題