Question

目前，我正在开发一个从twitch.tv API检索数据的项目。我有两个功能 - 一个用于分类用户是处于活动状态，非活动状态还是死亡状态（已删除其帐户），另一个是根据用户状态获取特定数据的功能。例如，如果在运行classification函数时我发现user1处于活动状态，那么使用profile函数我将检索他/她的个人资料图片和生物。我将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函数的问题

1 个答案: