[英]Understanding difference between forEach and for in javascript
我正在使用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调用是顺序进行的还是其他方法?
使用for (var i = 0; i < users.length; i++)) { ... }
,您随后将值0分配给i
直到users.length-1并对其进行了处理,但您仍处于同一闭包中。
由于js的异步特性,您在收到第一个答案之前先发送所有json请求。 当您的答案到达时, user
具有值users[users.length-1]
,这将在所有输出中使用。
使用users.forEach(function(user) { ... }
,为用户的每个元素创建一个新的闭包,在每个闭包中,都有一个本地user
变量,将在json请求的响应到达时使用。
当您使用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) };
希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.