JS代码乱序执行？ JS新手[重复]

Question

这个问题在这里已有答案：

• How do you make javascript code execute *in order* 9个答案

首先，我是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>");
            }
        }
    });
});

Answer 1

代码“乱序运行”的原因是因为API请求您异步运行。这些请求需要一些时间来返回数据，因此，在等待此请求返回时，不是将程序保持为人质，程序会继续执行，然后在数据有效后返回执行请求的回调函数中的代码回。

在这里了解更多关于promise https://developers.google.com/web/fundamentals/primers/promises的信息。这些功能非常强大，可用于处理http请求等内容。