javascript - 迭代和执行 $.ajax 操作时数组元素未定义

Question

$(document).ready(function() {
  loadStreamInfo();
  displayAll();
});
var allStreamInfo = [{ "user": "ogaminglol"}, { "user": "faceittv" }, { "user": "twitch"}, { "user": "hearthstonesea"}, {  "user": "stephensonlance"}, {"user": "aegabriel" }];

function loadStreamInfo() {
  for (var i = 0; i < 6; i++) {

    $.ajax({
      url: ("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[i].user),
      jsonp: "callback",
      dataType: "jsonp",
      success: function(data) {
        if (data.stream == null) {
          allStreamInfo[i]["status"] = "offline";
        } else {
          allStreamInfo[i]["status"] = "online";
        }
      }
    });

  }

  for (var i = 0; i < 6; i++) {
    $.ajax({
      url: ("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[i].user),
      jsonp: "callback",
      dataType: "jsonp",
      success: function(data) {
        allStreamInfo[i]["logo"] = data.logo;
        allStreamInfo[i]["gameName"] = data.game;
        allStreamInfo[i]["views"] = data.views;
        allStreamInfo[i]["followers"] = data.followers;
        allStreamInfo[i]["url"] = data.url;
      }
    });
  }

}

function displayAll() {
  for (var i = 0; i < 6; i++) {
    var outString = "";
    outString += "<div class='item'>";
    outString += "<img src='" + allStreamInfo[i].logo + "' alt='logo'>";
    outString += "<a href='" + allStreamInfo[i].url + "'><span id='gameName'>" + allStreamInfo[i].gameName + "</span></a>";
    outString += "<span id='state'>" + allStreamInfo[i].status + "</span>";
    outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[i].views + "</span></span>";
    outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[i].followers + "</span></span>";
    outString += "</div>";
    $("#result").append(outString);
  }
}

body {
  padding: 40px;
  ;
}
.toggle-button {
  width: 400px;
  color: white;
  height: 100px;
  text-align: center;
  margin: 0 auto;
}
.all {
  background-color: #6699CC;
  width: 30%;
  height: 70px;
  line-height: 70px;
  border-right: 2px solid grey;
  display: inline;
  float: left;
  cursor: pointer;
}
.online {
  cursor: pointer;
  line-height: 70px;
  background-color: cadetblue;
  border-right: 2px solid grey;
  width: 30%;
  height: 70px;
  display: inline;
  float: left;
}
.offline {
  cursor: pointer;
  background-color: darkorange;
  line-height: 70px;
  width: 30%;
  height: 70px;
  display: inline;
  float: left;
}
#result {
  margin-top: 30px;
}
.item {
  width: 500px;
  height: 70px;
  margin: 5px auto;
  background-color: #666699;
  border-left: 4px solid red;
  color: whitesmoke;
  /*border: 2px solid red;*/
}
a {
  text-decoration: none;
}
img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 21px;
}
span#gameName,
span#views-block,
span#state,
span#follow-block {
  position: relative;
  bottom: 18px;
}
span#gameName,
span#state,
span#views-block {
  margin-right: 21px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div class="toggle-button">
  <div class="all" onclick="displayAll()">All</div>
  <div class="online" onclick="displayOnline()">Online</div>
  <div class="offline" onclick="displayOffline()">Offline</div>
</div>
<div id="result">
</div>

我想在 JSON 对象中动态添加属性。我已阅读 post1和 post2 .但为什么我得到未定义的属性(property)？ allStreamInfo[i]["prop"] = "value" 不是给对象添加属性的方法吗？在调试窗口中，有 Uncaught TypeError: Cannot set property 'logo' of undefined(...)。查了API调用，没问题，好像没有定义prop，但是动态添加prop不就是这样吗？

Answer 1

当您使用 $.ajax() 时，它是循环中的异步操作。当获取 ajax 操作的结果时 i 将没有启动它的值，所以 allStreamInfo[i] 是 undefined 。

您可以使用 Closures , 保持 i 的值直到 ajax 操作完成

Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created.

for (var i = 0; i < 6; i++) {
    (function(j) {
        $.ajax({
            url: "https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user,
            jsonp: "callback",
            dataType: "jsonp",
            success: function(data) {
                allStreamInfo[j]["status"] = data.stream == null ? "offline" : "online";
            }
        });
    })(i);
}

请阅读 JavaScript closure inside loops – simple practical example