我有一个(稍微复杂的)函数集来用DOM填充DOM。首先,我打电话给一个带有电影列表的个性化JSON,然后调用每部电影的OMDb API来获取我想要的信息。我想接下来这些信息(在这个例子中,类型)以填充过滤菜单(如果你只是想看喜剧等,请点击“喜剧”)。
我想创建一个包含类型的对象,并使用它来填充我的菜单。我的问题是,当我的初始AJAX调用仍在工作时,菜单开始填充。我有一个“什么时候”,但似乎没有做到正确。
如果一旦获得所有电影信息,我如何设置仅填充流派菜单的指令?
到目前为止我的(删节)代码:
$(function(){
getMovieList();
});
function getMovieList() {
$.ajax({
url: "movielist.json",
type: "GET",
dataType: "JSON",
success: function(data) {
$.each(data, function(key, val) {
var title = val.toLowerCase().split(" ").join("+");
getMovieInfo(title);
});
},
complete: function() {
populateGenre(); // not doing what I want....
}
});
}
function getMovieInfo(title) {
$.ajax({
url: "https://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json",
type: "GET",
crossDomain: true,
dataType: "JSON",
success: function(val) {
if (!val.Error) {
$("#movie-list").append(...);
genre.push(val.Genre);
}
else {console.log(title)} // ... to catch any films not found on OMDb
}
});
function populateGenre() {
console.log(genre);
}
我希望这(暂时)能够登录几部dud电影,然后是长长的,笨拙的一系列类型。但是,populateGenre()控制台首先记录,而我的getMovieList()和getMovieInfo()函数仍在通过很长的电影列表。
我应该怎么做才能推回populateGenre()函数?谢谢你的帮助!
答案 0 :(得分:2)
第一个ajax调用的完整方法不会等待其他线程上的后续调用。您需要使用后续调用的success方法来知道所有数据都已加载。
$(function(){
getMovieList();
});
function getMovieList() {
$.ajax({
url: "movielist.json",
type: "GET",
dataType: "JSON",
success: function(data) {
for(var i=0;i<data.length;i++){
var title = data[i].toLowerCase().split(" ").join("+");
if(i == data.length - 1){
getMovieInfo(title, true);
}else{
getMovieInfo(title, false);
}
}
});
}
});
}
function getMovieInfo(title, isLast) {
$.ajax({
url: "https://www.omdbapi.com/?t=" + title + "&y=&plot=short&r=json",
type: "GET",
crossDomain: true,
dataType: "JSON",
success: function(val) {
if (!val.Error) {
$("#movie-list").append(...);
genre.push(val.Genre);
}
else {console.log(title)} // ... to catch any films not found on OMDb
if(isLast){
populateGenre();
}
}
});
function populateGenre() {
console.log(genre);
}