Ajax를 사용하는 JavaScript/jQuery 콜백

Question

Ajax 요청 (로컬 JSON에 첫 번째, 온라인 리소스에 두 번째) 이전에 실행되는 함수에 문제가 있습니다.

이 예제에서는 내 응용 프로그램에 필요한 모든 정보가 있고 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 : 당신이 성공을 실행하려면

Answer 1

https://plnkr.co/edit/0mhAUtEsaOUWhkZMJqma?p=preview 그냥 getMovieInfo에서 AJAX 요청의 success 콜백의 내부에 countTheMovies() 논리를 넣어.

Answer 2

거의 다 알았습니다.

당신이 getMovieList의 성공 콜백에 getMovieInfo 전화를 같은 방법으로, 당신은 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

[I 비동기 호출의 응답을 반환하려면 어떻게?]이

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