Javascript 数组在JSON函数之后给出错误

我试图检查twitch流是在线还是离线，如果是，请更改背景颜色。如果我在不使用数组的情况下进行检查，只输入名称，它就可以工作，但使用数组则不行（我不太了解JSON）

功能测试（）{
var twitchChannels=[“imaqtpie”、“summit1g”、“tyler1”、“greekgodx”]；
对于（var i=0；i

---

错误：红色部分中是json函数内部发生的情况

您的代码非常弱，因为您没有管理所做的每一次获取。 此外，您没有检查是否：

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和ValiLajs极其糟糕的练习；使用适当的JQuery方法进行访问。

您应该将twitchChannel传递给函数，因为变量i正在更改，这是一个与前面提到的其他问题类似的问题：

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

当您得到第一个响应时，循环已经完成，i==4，这超出了TwitchChannel的大小：这就是为什么在控制台上得到“4未定义”

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

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

    });
    }
}

功能测试（）{
var twitchChannels=[“imaqtpie”、“summit1g”、“tyler1”、“greekgodx”]；
对于（var i=0；i

当

console.log（i+“”+twitchChannels[i]），变量
i
已设置为4，访问数组
twitchChannels
的第4个元素会得到
未定义的
，因为数组只有4个元素

这是因为
$.getJSON
是一个速记Ajax函数，顾名思义，它异步执行您的请求。因此，实际发生的情况是，根据您提供的输出

循环执行了4次，并发送了4个Ajax请求
循环退出<代码>i

现在已设置为4

ajax请求返回；调用回调，但它们看到的

i

值现在是4

您可以将回调中的

console.log

更改为类似于

console.log的内容（i+“”+twitchChannels[i]+“（内部回调”）

以更清楚地看到这一点

通过将

i

的当前值绑定到闭包，可以获得正确的结果

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

  function make_callback(index) {
    return function (channel) {
        console.log(index + " " + twitchChannels[index]);

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

  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', make_callback(i));
  }

}

功能测试（）{
var twitchChannels=[“imaqtpie”、“summit1g”、“tyler1”、“greekgodx”]；
函数make_回调（索引）{
返回函数（通道）{
console.log（索引+“”+twitchChannels[index]）；
如果（通道[“流”]==null）{
log（“脱机：+twitchChannels[index]）
document.getElementById（twitchChannel[index]）.style.backgroundColor=“红色”；
}否则{
log（“联机：+twitchChannels[index]）
document.getElementById（twitchChannel[index]）.style.backgroundColor=“绿色”；
}
}
}
对于（var i=0；i

可能重复的

$。getJSON

是异步的，因此回调中

i

的值不会是您期望的值。使用

let i

或副本中描述的方法。另请参阅，您的答案不包含任何关于如何解决问题的信息。添加逻辑以测试dom VanillaJS“将JQuery与VanillaJS混合在一起非常糟糕的做法”：这根本不是一个糟糕的做法，如果您知道自己在做什么。在给定的代码

文档中。getElementById（TwitchChannel[i]）

将始终返回

null

。如果

document.getElementById（TwitchChannel[i]）

为

null

的测试是一种很好的做法，但它不能解决问题。@AngelPolitis:这是有争议的。由于我在大项目中的经验，这应该是造成重大问题的原因。特别是长期的。t、 niese：循环中的测试少于

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

  function make_callback(index) {
    return function (channel) {
        console.log(index + " " + twitchChannels[index]);

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

  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', make_callback(i));
  }

}