为什么jQuery函数不等待Javascript函数结果的结果？ [复制]

Question

我有两种方法。第二个调用第一个。当我将警报函数放入第一个函数时，我可以看到返回值。但第二个函数将值视为未定义。我不明白为什么 2. 无法处理价值？

function getTweetReply(id_str) {
    $.getJSON("get_tweet_reply.php", {id_str: id_str}, function(json) {
      tweet_relpy = '<blockquote>'+json.results[0].text+'</blockquote>';
      alert(tweet_relpy); // --> I can see the result
      return tweet_relpy;
    });
}

$(document).on("click", ".tweet",function(){
    var id_str = $(this).attr("id");
    $.getJSON("get_tweet_details.php", {id_str: id_str},     function(json) {
        tweet = '<img src="'+json.results[0].profile_image_url+'"><br>\
                ' + json.results[0].from_user + '<br>\
                ' + json.results[0].from_user_name + '<br>\
                ' + getTweetReply(json.results[0].id_str) + '</b><br>'; // --> undefined
       $("#float").html('<div id="replybox">'+ tweet +'</div>');
    });
});

Answer 1

首先，将 AJAX 与内容生成分开，并公开 Promise：

function getTweetDetails(id_str) {
    return $.getJSON("get_tweet_details.php", {id_str: id_str});
}

function getTweetReply(id_str) {
    return $.getJSON("get_tweet_reply.php", {id_str: id_str});
}

function render(details, reply) {
    // render HTML based on "details" and "reply" JSON structures
    var tweet = '...';
    $("#float").html('<div id="replybox">'+ tweet +'</div>');
}

这是关注点分离 - 这两个 AJAX 相关函数现在不需要回调参数，返回的“承诺”允许任意数量的回调取决于结果，并且还用于$.getJSON() 不直接支持的错误回调工作。

那么，由于第二个查询依赖于第一个：

$(document).on("click", ".tweet", function() {
    var id_str = this.id; // not $(this).attr('id') !!
    getTweetDetails(id_str).done(function(details) {
        getTweetReply(details.results[0].id_str).done(function(reply) {
            render(details, reply);
        });
    });
});