Question

我想要做的是，文档加载后我想调用从API获取数据的函数，然后调用另一个在html文档中显示此数据的函数，我试着调用文档就绪块中的函数但没有什么工作我不知道该怎么做任何帮助我将不胜感激。她是我的代码：

var _userList = [];
$(document).ready(function() {
    getData();
    toHtml();
});
function getData() {
var userName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
userName.forEach(function(user) {
    $.ajax({
        type: "GET",
        url: " https://wind-bow.glitch.me/twitch-api/users/" + user,
        success: function(data) {
            $.ajax({
                type: "GET",
                url: " https://wind-bow.glitch.me/twitch-api/streams/" + user,
                success: function(data1) {
                    data.st = data1;
                }
            });
            _userList.push(data);
            // console.log(data);
        }
    });
});
function toHtml() {
_userList.forEach(function(item) {
    var html = '<div class="user" id="' + item.display_name + '">' +
        '<div class="user-name-img">' +
        '<div class="user-img">' +
        '<img src="' + item.logo + '" alt="" srcset="">' +
        '</div>' +
        '<div class="user-name">' +
        '<h4>' + item.display_name + '</h4>' +
        '</div>' +
        '</div>';
    $(".content-body").append(html);
    if (item.st.stream != null) {
        var str1 = '#' + item.st.display_name + ' .user-img img';
        $(str1).addClass('active');
        var str2 = '#' + item.st.display_name + ' .user-name';
        $(str2).append('<h5><i class="fa fa-video-camera" aria-hidden="true"></i></h5>');
        $(str1.slice(0, str1.indexOf(' '))).addClass('act');
    }
});
}

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

你应该将你的toHTML函数嵌套在$ .ajax中（{success：

但是，由于您要发送多个请求以进行抽搐，您应该考虑以下事项：

最小化请求数量，以便抽搐不会将您标记为蛮力攻击者。把ajax放在循环中通常不是一件好事想法
由于您正在创建异步功能，因此您可能需要考虑使用await/promise来控制整体工作流程

如何在Javascript中加载文档后调用函数？

1 个答案: