JS代码乱序执行? JS新手[重复]
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS代码乱序执行? JS新手[重复]相关的知识,希望对你有一定的参考价值。
这个问题在这里已有答案:
首先,我是JS,html和CSS的新手。
当我调试这段代码时,似乎没有按照我期望的顺序运行,从上到下。我究竟做错了什么?
这段代码应该使用twitch.tv api来查找我关注的频道,获取他们的ID,运行另一个ajax调用以查看它们是否正常,如果它们是实时的,则将它们呈现在我的html页面上。
我已经尝试调试这个并在Postman中运行ajax调用,并且调用确实适用于Twitch API,我得到了我想要的信息。问题是,它运行乱序,所以代码没有做我想要的。我尝试使用Chrome代码中的Chrome断点和Debugger for Chrome扩展程序进行调试。
$(document).ready(function() {
var userID = [];
var logo = [];
var status = [];
var name = [];
var totalFollowing;
//Get User IDs for following
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/users/Lucidic_/follows/channels?limit=100',
headers: {
'Client-ID': 'hidden',
'Accept': 'application/vnd.twitch.v5+json'
},
success: function(followingData) {
for (var i = 0; i < followingData._total; i++) {
totalFollowing = followingData._total;
userID.push(followingData.follows[i].channel._id);
logo.push(followingData.follows[i].channel.logo);
status.push(followingData.follows[i].channel.status);
name.push(followingData.follows[i].channel.display_name);
}
}
});
var allFollowingURL = "https://api.twitch.tv/helix/streams?";
for (var i = 0; i < totalFollowing; i++) {
allFollowingURL.concat("&user_id=" + userID[i])
}
$.ajax({
type: "GET",
url: allFollowingURL,
headers: {
'Client-ID': 'hidden',
'Accept': 'application/vnd.twitch.v5+json'
},
success: function(channelData) {
if (channelData.data.type = 'live') {
$("#followerInfo").prepend("<div class = 'row'>" + "<div class = 'col-sm-4'>" + "<img src='" + logo[i] + "'>" + "</div>" + "<div class = 'col-sm-4'>" + name[i] + "</div>" + "<div class = 'col-sm-4'>" + status[i] + "</div></div>");
}
}
});
});
答案
代码“乱序运行”的原因是因为API请求您异步运行。这些请求需要一些时间来返回数据,因此,在等待此请求返回时,不是将程序保持为人质,程序会继续执行,然后在数据有效后返回执行请求的回调函数中的代码回。
在这里了解更多关于promise
https://developers.google.com/web/fundamentals/primers/promises的信息。这些功能非常强大,可用于处理http请求等内容。
以上是关于JS代码乱序执行? JS新手[重复]的主要内容,如果未能解决你的问题,请参考以下文章