for循环中获取JSON函数的错误调用

Question

通过从循环中删除一个函数，我在重新格式化JavaScript时遇到了问题。

以下是我的JavaScript代码：

$(document).ready(function () {
  //GET TWITCH TV STREAMERS' STATUS AND API CALL

  var twitchTvStreamers = ["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  //OUT OF ALL THE TWITCH TV STREAMERS IN A TWITCH TV ARRAY FIND THOSE 8 STREAMERS LISTED
  for (var i = 0; i < twitchTvStreamers.length; i++) {

    //DO A GETJSON ON THIS ARRAY TO RETRIEVE INFORMATION FROM THE VALUES OF THOSE 8 TWITCH TV STREAMERS
    $.getjSON('https://wind-bow.glitch.me/twitch-api/streams' + val, function (st) {
      //var url="https://wind-bow.glitch.me/twitch-api/streams" 

      channelName = val;

      //IF ANY OF THE STATUSES OF THE 8 TWITCH TV STREAMERS ARE EQUAL TO NULL, OR OFFLINE, THEN DO SOMETHING
      if (st.stream === null) {
        //GET JSON INFO OF THOSE OFFLINE STREAMERS
        $.getjSON('https://wind-bow.glitch.me/twitch-api/channels' + val, function (ch) {

          channelID = ch.Display_name;
          channelLogo = ch.logo;
          channelUrl = ch.url;
          streamContent = ch.content;

          //POST INFO TO DISPLAY AREA OF WEB APP (...ADD OTHER STUFF TO THIS APPEND LATER)
          $('#offline').append('<div class="TV-screen">');
        });

      } else
        //REPEAT SAME SCENARIO AS USED FOR OFFLINE STREAM STATUS    
        $.getjSON('https://wind-bow.glitch.me/twitch-api/channels' + val, function (ch) {

          channelID = ch.Display_name;
          channelLogo = ch.logo;
          channelUrl = ch.url;
          streamContent = ch.content;

          $('#online').append('<div class="TV-screen">');
        });

    }               

//在https://www.youtube.com/watch?v=Nm2bXBlELZU&list=PLHdCowjFIBmJwYL9tPZOkn6CIVLg6Z36a等的帮助下.

我将上述代码放入www.jshint.com中，并给出了以下结果：

“三个警告”：

1. 11不要在循环中做函数。
2. 42预期)，而不是看到‘。
3. 49无法恢复的语法错误。(100%扫描)。

如何重新格式化代码(在第11行)以包含get JSON函数，但不包含在循环中？

Answer 1

您在语法、键入、错误的函数名和错误的占位符的使用中出现了大量错误，以延迟异步调用的返回。以下是错误的摘要。同时，运行代码以确保其实际工作。

​

$(document).ready(function(){
// Who we want to stalk today
var twitchTvStreamers=["FreeCodeCamp", "ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

// Get the status of each channel using the getChannelInfo() function
for(channel of twitchTvStreamers){
    getChannelInfo(channel);
    }
});

// This function gets the status of each channel
// and, depending whether it is online or offline, 
// calls the appendInfo() function with the online/offline parameter
var getChannelInfo = channel => { 
    $.getJSON('https://wind-bow.glitch.me/twitch-api/streams/' + channel)
    .done(function(info) {
        if (info.stream === null) appendInfo(channel,'offline');
        else appendInfo(channel,'online');
    });
}

// This function gets info on whether the channel is online or offline. 
// Depending on this status, it gets the channel info 
// and appends it in the respective `<div>`
var appendInfo = (channel,target) => {
    $.getJSON('https://wind-bow.glitch.me/twitch-api/channels/' + channel)
        .done( function(ch){
            channelID = ch.display_name;
            channelLogo = ch.logo;
            channelUrl = ch.url;
            streamContent = ch.content;
            $('#'+target).append('<div class="TV-screen">'+channel+' is '+target);
        });    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="online"></div>
<div id="offline"></div>

​

因此，您的代码问题是：

1. channel = val;设置通道变量，而不是val变量。val = channel将设置val变量，但这在代码中也不起作用。你可以像val = twitchTvStreamers[i];一样设置val
2. getjSON应该拼写为getJSON - case matters！
3. ch.Display_name不能工作，因为返回的对象键拼写为display_name。再一次，小心你的案子。
4. $('#offline').append('<div class="TV-screen">'); --这只是向#offline元素添加了一个空白<div>。您也希望在这里包含一些特定于频道的信息。
5. 而且，最重要的是，您必须确切地了解JS承诺是如何工作的。我最后读到的最好的资料是凯尔·辛普森的“你不知道JS”系列的同步与性能书。jQuery的getJSON使用了承诺接口，因此了解底层技术肯定有帮助。

简单地说，当您正在创建一个异步调用时，响应需要一段时间才能通过，同时，其他代码也会执行。例如，您有一个名为status的变量，并且您正在对Twitch和bar的状态进行API调用。在API响应返回之前，您的代码已经在页面上打印出<div id="foo">和<div id="bar">。然后状态返回，通道foo的状态返回为online，并将status变量设置为“online”。然后，bar状态返回为“脱机”，并将status变量设置为脱机。如果处理不当，JS将返回最后一个值(脱机)，它将应用于所有元素。

您必须能够进行调用并将其结果承诺给正确的DOM元素。我是这样做的：

• 获取状态
  • 如果联机，获取通道详细信息，生成一个DOM元素，附加到“online”div
  • 如果脱机，获取通道详细信息，生成DOM元素，附加到“脱机”div

​

在这里，生成和追加DOM元素的顺序不跨越进行AJAX调用和获得结果的顺序。最简单的方法是将这个序列分解为单独的函数，并按每一步调用它们，我就是这样做的。

Answer 2

1. 最后你忘记了大量的括号。这就是您的代码的样子。 $(Document).ready(函数()){ //GET TWITCH彩带的状态，API调用var twitchTvStreamers = "FreeCodeCamp“、"ESL_SC2”、"OgamingSC2“、"cretetion”、"storbeck“、"habathcx”、"RobotCaleb“、"noobs2ninjas"；//在抽搐电视阵列中的所有抽动电视彩带中，发现这8条彩带列出了twitchTvStreamers.map(Val){ //DO A GETJSON，从8条TV彩带$.getjSON('https://wind-bow.glitch.me/twitch-api/streams‘+ val，function(st) { //var url="https://wind-bow.glitch.me/twitch-api/streams“channelName =val)的值中检索信息；//如果8个抽动电视彩带的状态等于空，或脱机，那么如果(st.stream === NULL ){//获取离线彩带的JSON信息(‘https://wind-bow.glitch.me/twitch-api/channels’+ val，函数(Ch){ channelID = ch.Display_name；channelLogo = ch.logo；channelUrl = ch.url；streamContent = ch.content；//POST信息以显示网络应用程序的区域(稍后将...ADD其他内容添加到此附件)$(‘#脱机’).append(‘；})；}{//重复与脱机流状态$.getjSON('https://wind-bow.glitch.me/twitch-api/channels’+ val，function(ch) { channelID = ch.Display_name；channelLogo = ch.logo；channelLogo=ch.logo；channelUrl = ch.url；streamContent = ch.content；$(‘#online’).append(‘；})；}；// getJSON }；// map })；//就绪

这解决了问题2和问题3，但我仍然不确定代码中的val是什么。我想它是流名，所以我把它添加到：

1. 用array.map()函数代替for loop函数避免第一个问题