使用Ajax的JavaScript / jQuery回调

Question

I'm having trouble with my functions running before Ajax requests (the first to a local JSON, the second to an online resource) have finished.

In this example I want countTheMovies to run at the end after my application has got all the information it needs and populated the divs. Instead it's running straight away.

I tried to delay it using an if condition, but with no joy. I've also tried with callbacks, but think I must be getting those wrong (I'm assuming callbacks are the answer). I'm aware of timed delays, but because in the actual project I'm sourcing 250+ movies (and because a timed delay seems like cheating) I thought I'd ask here instead.

Can anyone recommend JavaScript or jQuery code to fix this problem?

$(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.");
}

A plunker of my failings: https://plnkr.co/edit/0mhAUtEsaOUWhkZMJqma?p=preview

Answer 1

You've almost got it!

The same way that you call getMovieInfo in the success callback of getMovieList , you should be calling countTheMovies in the success callback of getMovieInfo .

Answer 2

As Jacob said above, move the countTheMovies call inside the AJAX request.

 $(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."); } 

Answer 3

如果希望成功运行，只需将countTheMovies()逻辑放入countTheMovies() AJAX请求的success回调中getMovieInfo 。

Answer 4

You can call your countTheMovies() function from inside the success field of your Ajax call. This way it will make the function call when you intend it to.

Answer 5

Try out this

$(function(){
      getMovieList();
    });

    function getMovieList() {
    $.when( $.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);
          }
        }
      }) ).then(function( data, textStatus, jqXHR ) {
      countTheMovies();
    });
    }

      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
            );
          }
        }
      });
    };
    function countTheMovies() {
      $("#app").append("There are " + $(".movie").length + " movies.");
    }