与异步和同步函数相关的未定义 javascript 函数的问题

Question

目前我正在从事一个从 twitch.tv API 检索数据的项目。我有两个功能——一个是对用户是活跃、不活跃还是死亡（已删除他们的帐户）进行分类，另一个是根据用户的状态获取特定数据。例如，如果在运行 classification 函数时我发现 user1 处于活动状态，那么使用 profile 函数我将检索 his/her 个人资料图片和简历.我将从 profile 函数返回的字符串值存储在 add 变量中，但是 console.log(add) 显示为未定义。我的代码如下。任何解释或解决方案将不胜感激！我是 Javascript 的新手，所以简单的解释会很棒！

$(document).ready(function(){
var users= ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "MedryBW", "comster404", "brunofin"];
classification(users);

function classification(arr){
    for(var i=0; i<arr.length; i++) {
        (function(i) {
        $.getJSON("https://api.twitch.tv/kraken/streams/"+arr[i]+"?callback=?", function (data){
            var code="";
            if(data.stream) {
                var add= profile(arr[i], data.stream);

                code="<div id='"+arr[i]+"' class='active'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='check-icon' src='css/images/check.png'>"+add+"</div>";

                //why is add undefined??
                console.log(add);
                $("#content").append(code);

            } else if (data.stream===null) {
                var add= profile(arr[i], data.stream);
                 code="<div id='"+arr[i]+"' class='inactive'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='x-icon' src='css/images/x.png'>"+add+"</div>";
                //why is add undefined??
                console.log(add);
                $("#content").append(code);

            } else if (data.error) {
                 code="<div id='"+arr[i]+"' class='dead'>Unfortunately "+arr[i]+" has deleted their account</div>";
                $("#content").append(code);
            }

        });
     })(i);

    }


}


function profile(val, ifActive) {
    var code="";
    $.getJSON("https://api.twitch.tv/kraken/users/"+val+"?callback=?", function (data){
        if(ifActive) {
            var pic= data.logo;
            var bio= data.bio;
            code="<span class='pic'><img src='"+pic+"'></span><div class='bio'>"+bio+"</div>";


            return code;

        } else if(ifActive===null) {
            var pic= data.logo;
            code="<span class='pic'><img src='"+pic+"'></span>";


            return code;

        } 
    });


}

});

Answer 1

在您的配置文件函数中实施回调

$(document).ready(function(){
    var users= ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff", "MedryBW", "comster404", "brunofin"];
    classification(users);

    function classification(arr){
        for(var i=0; i<arr.length; i++) {
            (function(i) {
                $.getJSON("https://api.twitch.tv/kraken/streams/"+arr[i]+"?callback=?", function (data){
                    var code="";
                    if(data.stream) {
                        profile(arr[i], data.stream, function(add){
                            code="<div id='"+arr[i]+"' class='active'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='check-icon' src='css/images/check.png'>"+add+"</div>";

                            //why is add undefined??
                            console.log(add);
                            $("#content").append(code);
                        });


                    } else if (data.stream===null) {
                        profile(arr[i], data.stream, function(add){
                             code="<div id='"+arr[i]+"' class='inactive'><a href='http://www.twitch.tv/"+arr[i]+"'>"+arr[i]+"</a><img class='x-icon' src='css/images/x.png'>"+add+"</div>";
                            //why is add undefined??
                            console.log(add);
                            $("#content").append(code);
                        });

                    } else if (data.error) {
                         code="<div id='"+arr[i]+"' class='dead'>Unfortunately "+arr[i]+" has deleted their account</div>";
                        $("#content").append(code);
                    }

                });
            })(i);
        }
    }

    function profile(val, ifActive, callback) {
        var code="";
        $.getJSON("https://api.twitch.tv/kraken/users/"+val+"?callback=?", function (data){
            if(ifActive) {
                var pic= data.logo;
                var bio= data.bio;
                code="<span class='pic'><img src='"+pic+"'></span><div class='bio'>"+bio+"</div>";
                if(typeof callback == 'function') {
                    callback(code);
                }
            } else if(ifActive===null) {
                var pic= data.logo;
                code="<span class='pic'><img src='"+pic+"'></span>";
                if(typeof callback == 'function') {
                    callback(code);
                }
            } 
        });


    }
});

与异步和同步函数相关的未定义 javascript 函数的问题

Issue with undefined javascript function related to asynchronous and synchronous functions

javascript

jquery

asynchronous

callback

undefined