Jquery函数不等待Javascript函数结果的结果么?

时间:2013-05-12 13:43:11

标签: javascript jquery ajax function asynchronous

我有2种方法。第二个叫第一个。当我将警报功能放入第一个时,我可以看到返回值。但第二个函数将值视为未定义。我无法理解为什么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>');
    });
});

1 个答案:

答案 0 :(得分:1)

首先,将您的AJAX与内容生成分开,并公开承诺:

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相关的函数现在不需要回调参数,返回的“promise”允许任意数量的回调依赖于结果,也适用于$.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);
        });
    });
});