jQuery AJAX异步回调函数不起作用

时间:2014-03-18 08:09:27

标签: javascript jquery ajax asynchronous callback

我知道这里有一些问题与我的类似问题,但在尝试了所有这些问题后,我仍然遇到了我认为是由我的AJAX调用的异步行为引起的问题。

基本流程如下:

Click button -> getInfo(makeList)
                AJAX call... success: makeList();
                    -> makeList()
                       var friendArray = getFriends(createArray);
                    -> getFriends(createArray)
                       AJAX call... success: return createArray(data);
                           -> createArray(data)
                              var friends = new Array();
                              var friendID = data.id;
                              var friendName = getName(friendID);
                              friends.push(friendName + ":" + friendID);
                              return friends;
                                  -> getName(id)
                                     AJAX call... success: return data.name;

以下是代码的要点:

$("#submit").click(getInfo(makeList));

function getInfo(callback) {
    $.ajax({
        ...
        success: function(data) {
            ...
            callback();
        }
    });
}

function makeList() {
    var friendArray = getFriends(createArray);
    for (var n in friendArray) {
        $("#friends").append("<option value=\""
            + friendArray[n].split(":")[1] + "\">"
            + friendArray[n].split(":")[0] + "</option>");
        }
}

function getFriends(callback) {
    $.ajax({
        ...
        success: function(data) {
            ...
            return callback(data);
        }
    });
}

function createArray(data) {
    var friends = new Array();
    for (var i in data) {
        var id = data[i].id;
        var friendName = getName(id);
        friends.push(friendName + ":" + id);
    }
    return friends;
}

function getName(id) {
    $.ajax({
        ...
        success: function(data) {
            ...
            return data.name;
        }
    });
}

我在console.log(friendArray)的开头有一个makeList()来电,紧接着调用var friendArray = getFriends(createArray)并打印出 friendArray = undefined 所以我假设正在发生的是,该功能正在继续而不等待getFriends(createArray)功能完成。

似乎createArray(data)函数不等待getName(data.id)函数完成,因此所有名称都以未定义的形式返回。

正如你所看到的,我已经尝试将各种函数作为回调函数传递,但它对我没有任何帮助。对我所做的错误或我应该改变以获得所需行为的任​​何指示都将不胜感激!

1 个答案:

答案 0 :(得分:1)

更改makeList功能:

function makeList() {
  getFriends(function(data){
    var friendArray = createArray(data);
    for (var n in friendArray) {
        $("#friends").append("<option value=\""
            + friendArray[n].split(":")[1] + "\">"
            + friendArray[n].split(":")[0] + "</option>");
        }
  });
}

调用getFriends(createArray)将返回undefined,因为函数内的ajax调用是异步的。一旦调用要启动的ajax调用。该函数返回其调用者并且ajax独立地继续。因为你需要确保只有在ajax返回后才执行friendArray循环,所以也应该在回调时执行。