Question

我有一个（稍微复杂的）函数集来用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（）函数？谢谢你的帮助！

Answer 1

第一个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);
}

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

1 个答案: