使用 Ajax 的 JavaScript/jQuery 回调

Question

我在 Ajax 请求(第一个到本地 JSON，第二个到在线资源)完成之前运行我的函数时遇到问题。

在这个例子中，我希望 countTheMovies 在我的应用程序获得它需要的所有信息并填充 div 之后运行。相反，它会立即运行。

我尝试使用 if 条件来延迟它，但没有任何乐趣。我也尝试过回调，但我想我一定是弄错了(我假设回调就是答案)。我知道定时延迟，但因为在实际项目中我采购了 250 多部电影(并且因为定时延迟看起来像是作弊)我想我应该在这里问。

谁能推荐 JavaScript 或 jQuery 代码来解决这个问题？

$(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].title.toLowerCase().split(" ").join("+");
        var year = data[i].year;
        i === data.length - 1
          ? getMovieInfo(title, year, true)
          : getMovieInfo(title, year, false);
      }
    }
  });
}

function getMovieInfo(title, year, isLast) {
  $.ajax({
    url: "https://www.omdbapi.com/?t=" + title + "&y=" + year + "&plot=short&r=json",
    type: "GET",
    crossDomain: true,
    dataType: "JSON",
    success: function(val) {
      if (!val.Error) {
        movie = title.replace(/[^a-z0-9\s]/gi, '');
        $("#app").append(
          // appending info to divs
        );
      }
    }
  });
  if (isLast) countTheMovies();
};

function countTheMovies() {
  $("#app").append("There are " + $(".movie").length + " movies.");
}

我的失败之处:https://plnkr.co/edit/0mhAUtEsaOUWhkZMJqma?p=preview

Answer 1

你快搞定了!

与在 getMovieList 的成功回调中调用 getMovieInfo 的方式相同，您应该在 的成功回调中调用 countTheMovies >getMovieInfo.