我知道这里有一些问题与我的类似问题,但在尝试了所有这些问题后,我仍然遇到了我认为是由我的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)
函数完成,因此所有名称都以未定义的形式返回。
正如你所看到的,我已经尝试将各种函数作为回调函数传递,但它对我没有任何帮助。对我所做的错误或我应该改变以获得所需行为的任何指示都将不胜感激!
答案 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
循环,所以也应该在回调时执行。