时间戳

首页 > 解决方案 > JS代码乱序执行？JS新手

javascript - JS代码乱序执行？JS新手

问题描述

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

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

这段代码应该使用 twitch.tv api 来查找我关注的频道，获取他们的 ID，运行另一个 ajax 调用以查看它们是否处于活动状态，如果它们处于活动状态，则将它们呈现在我的 html 页面上。

我已经尝试在 Postman 中调试它并运行 ajax 调用，并且这些调用确实适用于 Twitch API，并且我得到了我想要的信息。问题是，它运行不正常，所以代码不符合我的意图。我尝试在 VS Code 中使用 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>");
            }
        }
    });
});

标签： javascript

解决方案

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

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

推荐阅读