Question

我正在使用twitch.tv API编写应用程序，我需要为不同的用户进行多次getJSON（）调用。以下输出是否有任何解释。

//users array contains the list of users for which data is fetched
var users = ["freecodecamp", "brunofin", "storbeck", "medrybw", "comster404", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];

使用简单的for循环时：

for (var i = 0; i < users.length; i++) {
            var user = users[i];
            $.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(json) {
                var add = user;
                if(json.status === 422) {
                    add = add + ' ' + "Closed";
                } else {
                    if (json.stream === null) {
                        add = add + ' ' + "Offline";
                    } else {
                        add = add + ' ' + json.stream.game;
                    }
                }
                $("#userList").append("<div>" + add + "</div>");
            });
};

输出：

beohoff Closed
beohoff Offline
beohoff Offline
beohoff Offline
beohoff StarCraft: Brood War
beohoff Offline
beohoff Offline
beohoff Offline
beohoff Offline 
beohoff Closed
beohoff Offline

使用forEach时：

users.forEach(function(user) {
            $.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(json) {
                var add = user;
                if(json.status === 422) {
                    add = add + ' ' + "Closed";
                } else {
                    if (json.stream === null) {
                        add = add + ' ' + "Offline";
                    } else {
                        add = add + ' ' + json.stream.game;
                    }
                }
                $("#userList").append("<div>" + add + "</div>");
            });
});

输出：

brunofin Closed
comster404 Closed
storbeck Offline
terakilobyte Offline
freecodecamp Offline
medrybw StarCraft: Brood War
thomasballinger Offline
RobotCaleb Offline
noobs2ninjas Offline
habathcx Offline
beohoff Offline

在forEach的情况下是否按顺序进行了ajax调用，还是还有别的东西？

Answer 1

使用for (var i = 0; i < users.length; i++)) { ... }，您随后将值0到user.length-1分配给i并对其执行某些操作，但您保持在同一个闭包中。

由于js的异步性质，您在收到第一个答案之前发送所有json请求。当您的答案到达时，user的值为users[users.length-1]，然后会在您的所有输出中使用。

使用users.forEach(function(user) { ... }，您可以为每个用户元素创建一个新的闭包。在每个闭包中，您都有一个本地user变量，当您的json请求响应到来时，您将使用该变量。

Answer 2

当你使用for循环并在其范围内运行异步代码时，当第一次返回Ajax时，迭代已经结束。

使用forEach循环为每次迭代运行一个回调，创建一个新的socpe，甚至迭代结束，每个函数现在都在等待调用的事件循环中。

你可以这样做，所以它会是一样的：

for (var i = 0; i < users.length; i++) {
    getUser(user[i]);
};

function getUser(user){
  $.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(json) {
      var add = user;
      if(json.status === 422) {
          add = add + ' ' + "Closed";
      } else {
          if (json.stream === null) {
              add = add + ' ' + "Offline";
          } else {
              add = add + ' ' + json.stream.game;
          }
      }
      $("#userList").append("<div>" + add + "</div>");
  });
}

理解它的最好方法是使用setTimeout循环并打印i：

for(var i = 0; i < 10; i++){
    setTimeout(function(){ console.log(i) }, 100);
};

将输出：10次，并运行一个函数：

for(var i = 0; i < 10; i++){
    log(i)
};

function log(i){ setTimeout(function(){ console.log(i)}, 100) };

希望它有所帮助。

了解forEach和forjavascript之间的区别

2 个答案: