Question

首先，我是JS，HTML和CSS的新手。

当我调试此代码时，它似乎没有按照我期望的顺序从上到下运行。我究竟做错了什么？

该代码应该使用twitch.tv api查找我关注的频道，获取其ID，运行另一个ajax调用以查看它们是否存在，如果存在，请将其显示在我的html页面上。

我尝试调试该错误并在Postman中运行ajax调用，并且这些调用确实适用于Twitch API，并且我获得了所需的信息。问题是，它运行不正常，因此代码无法实现我的预期。我尝试在VS Code中使用Chrome断点和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要求您异步运行。这些请求需要花费一些时间才能返回数据，因此，程序将继续执行，然后在数据包含以下内容后返回执行请求的回调函数中的代码，而不是在等待该请求返回时让程序成为人质返回。

在https://developers.google.com/web/fundamentals/primers/promises处了解有关学习promise的更多信息。这些功能非常强大，对于处理诸如http请求之类的事情很有用。

JS代码执行混乱？ JS新手

1 个答案: