Question

我正在尝试检查抽搐流是在线还是离线，如果是，则更改背景颜色。如果我检查没有数组，只是输入它的名称，但它与数组不相符（我没有很多JSON知识）。

function test() {
  var twitchChannels = ["imaqtpie", "summit1g", "tyler1", "greekgodx"];

  for (var i = 0; i < twitchChannels.length; i++) {
    console.log(i + " " + twitchChannels[i]);

    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchChannels[i] + '?client_id=XXXX', function(channel) {
      console.log(i + " " + twitchChannels[i]);

      if (channel["stream"] == null) {
        console.log("Offline: " + twitchChannels[i])
        document.getElementById(twitchChannels[i]).style.backgroundColor = "red";
      } else {
        console.log("Online: " + twitchChannels[i])
        document.getElementById(twitchChannels[i]).style.backgroundColor = "green";
      }

    });
  }

}

错误：红色部分内的http://prntscr.com/i6qj51是json功能内部发生的事情

Answer 1

您的代码非常弱，因为您没有管理每个获得的callback 。你也没有检查是否：

document.getElementById(twitchChannels[i])

为空，因为例外清楚地表明你无法获得：

.style.backgroundColor

从无到有。

基本检查VanillaJS：

if(!document.getElementById("s"))
  console.log('id ' + twitchChannels[i] +  ' not found in dom')
else 
  console.log('id ' + twitchChannels[i] +  ' found in dom')

另外考虑将JQuery与VanillaJS混合使用非常糟糕的做法;使用适当的JQuery方法访问dom element by ID。

Answer 2

你应该将twitchChannel传递给函数，因为var i正在改变，这是一个像其他已经提到过的问题：Preserving variables inside async calls called in a loop.

Answer 3

问题是您在cicle中进行了一些ajax调用，但是ajax调用是异步的。

当你得到第一个回复时，cicle已经完成，而i == 4，这是在twitchChannels大小之外：这就是你在控制台上得到“4 undefined”的原因。

您可以通过以下方式更改代码：

function test() {
    var twitchChannels = ["imaqtpie", "summit1g", "tyler1", "greekgodx"];

    for (var i = 0; i < twitchChannels.length; i++) {
        executeAjaxCall(twitchChannels[i]);
    }
}
function executeAjaxCall(twitchChannel){
    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchChannel + '?client_id=XXXX', function(channel) {
        console.log(twitchChannel);

        if (channel["stream"] == null) {
            console.log("Offline: " + twitchChannel)
            $('#'+twitchChannel).css("background-color", "red");
        } else {
            console.log("Online: " + twitchChannel)
            $('#'+twitchChannel).css("background-color", "green");
        }

    });
    }
}

Answer 4

在回调函数中调用TypeError: Fetch argument None has invalid type <class 'NoneType'>时，变量console.log(i + " " + twitchChannels[i]);已设置为4，并且访问数组i的第4个元素会产生twitchChannels，因为数组只有4个元素。

这是因为undefined是一个简写的 Ajax 函数，顾名思义，它以异步方式执行的请求。所以实际发生的是，基于你提供的输出，

循环执行4次，并且已发送了4个Ajax请求。
循环退出; $.getJSON现已设置为4。
ajax请求返回;调用回调，但他们看到的i值现在为4。

您可以将回调中的i更改为console.log，以便更清楚地看到这一点。

通过将console.log(i + " " + twitchChannels[i] + " (inside callback)");的当前值绑定到闭包，可以获得正确的结果。

数组在JSON函数后出错

4 个答案: