javascript - JSON 输出在代码中仍未定义，但警报正常，这是范围问题吗？

Question

我正在使用 Facebook 图形 API 获取用户的好友列表，并根据模板和随机好友生成状态消息。如果我使用 alert(response.data[0].name); 而不是 return(response); 我的代码可以工作，我会看到第一个 Facebook 好友的名字。当我在我的代码中进一步处理它时，它会抛出一个未定义的错误。基于尝试解决问题的几个小时，我认为我的范围存在某种问题，不允许我再使用响应或 JSON 格式存在问题。我也尝试使用 jQuery 的 JSON 解析，但没有获得任何额外的东西。

shuffle = function(v){
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

function getFriends() {
    FB.login(function(response) {
        if (response.session && response.perms) {
        FB.api('/me/friends', function(response) {
            return response;
        });
        }
    } , {perms:'publish_stream'});
};

function selectFriend(){
    var friends = getFriends();
    friends = friends.data[0];
    var findex = friends.length
    var randomNumber = (Math.floor( Math.random() * 10 ) % findex);
    return(friends[randomNumber].name);
};

function process(status){
    status = status[0].toString();
    var cindex = status.indexOf("{{friend}}");

    while (cindex != -1){
        status = status.replace("{{friend}}",selectFriend());
        cindex = status.indexOf("{{friend}}");
    }
    return(status);
};

function newStatus(){
    var status = [
        "This status is named {{friend}}",
        "This status loves {{friend}} but likes {{friend}} too.",
        "This status goes by {{friend}} but you can call it {{friend}} if you like.",
        "This status hates {{friend}}"
    ];

    status = shuffle(status);
    $('#status').text(process(status));
}

代码从点击时调用 newStatus() 开始。

编辑:以下是我重构代码以在 jfriend00 的回答后工作的方式:

shuffle = function(v){
    for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
    return v;
};

function newStatus(){
    var status = [
        "This status is named {{friend}}",
        "This status loves {{friend}} but likes {{friend}} too.",
        "This status goes by {{friend}} but you can call it {{friend}} if you like.",
        "This status hates {{friend}}"
    ];
    status = shuffle(status);
    status = status[0].toString();

    FB.login(function(response) {
        if (response.session && response.perms) {
        FB.api('/me/friends', function(response) {
            var friends = response.data;
            var findex = friends.length

            var cindex = status.indexOf("{{friend}}");

            while (cindex != -1){
                var randomNumber = (Math.floor( Math.random() * 10 ) % findex);
                var name = friends[randomNumber].name;

                status = status.replace("{{friend}}",name);
                cindex = status.indexOf("{{friend}}");
            }
            $('#status').text(status);
        });
        }
    } , {perms:'publish_stream'});
}

Answer 1

问题可能是对 FB api 的调用是异步的。这意味着当您调用 FB.api() 时，它会启动对 FB 的 ajax 调用。在完成该 ajax 调用时，您的其他代码将继续运行。事实上，在 FB ajax 调用完成之前，您对 getFriends 的调用已完成并且 selectFriend() 的其余部分也在运行。

然后，当 FB api 调用完成时，它会调用完成函数(可能是您发出警报的地方)。在您的代码中，您在完成函数中没有做任何有意义的事情。您只是用

返回响应

return response;

但是，这没有做任何有用的事情。该返回值不是 getFriends() 函数的返回值。这是对 ajax 引擎内部某些东西的回归。

如果您想对 FB.api() 响应做一些有用的事情，您需要运行该代码或从 FB.api( ) 调用。

您将不得不执行类似于此伪代码的操作:

function getFriends() {
    FB.login(function(response) {
        if (response.session && response.perms) {
        FB.api('/me/friends', function(response) {
            var friends = response.data[0];
            var findex = friends.length
            var randomNumber = (Math.floor( Math.random() * 10 ) % findex);
            var name = friends[randomNumber].name;
            // now continue on with whatever you want to do with the random friend info
            // you cannot just return data from this callback, you have to actually carry
            // out whatever you were going to do with the data here
        });
        }
    } , {perms:'publish_stream'});
};

function selectFriend(){
    getFriends();
    // the getFriends() function is asynchronous and the FB.api() call has not yet
    // completed so we can't do anything here yet as we have to wait for the
    // FB.api() call to finish first.
};