延迟JQuery函数,直到另一个JQuery函数运行

时间:2016-08-01 13:25:43

标签: jquery ajax

我有一个(稍微复杂的)函数集来用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()函数?谢谢你的帮助!

1 个答案:

答案 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);
}