Ajaxを使用したJavaScript/jQueryコールバック

Question

Ajaxリクエスト（ローカルのJSONに1番目、オンラインリソースに2番目）の前に実行していた機能に問題があります。

この例では、アプリケーションに必要なすべての情報が得られ、divに値を設定した後、countTheMoviesを最後に実行します。代わりに、それはすぐに実行されています。

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

私の欠点のplunker：あなたはそれが成功した場合に実行したい場合はhttps://plnkr.co/edit/0mhAUtEsaOUWhkZMJqma?p=preview

Answer 1

ちょうどgetMovieInfoでAJAXリクエストのsuccessコールバックの内側にあなたのcountTheMovies()ロジックを置きます。

Answer 2

あなたはほとんどそれを持っています！

成功コールバックgetMovieListに同じ方法でgetMovieInfoを呼び出すと、の成功コールバックでcountTheMoviesを呼び出す必要があります。

Answer 3

上記のJacob氏のように、countTheMoviesコールをAJAXリクエスト内に移動します。

$(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 4

あなたのAjax呼び出しのsuccessフィールド内からあなたのcountTheMovies（）関数を呼び出すことができます。これにより、意図したときに関数呼び出しが行われます。

Answer 5

[私は非同期呼び出しからの応答を返すにはどうしますか？]のこの

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