Задержка функции JQuery до запуска другой функции JQuery

Question

У меня есть (слегка запутанный) набор функций для заполнения DOM с информацией. Для начала позвоните в персонализированный JSON со списком фильмов, который, в свою очередь, вызывает API OMDb для каждого фильма, чтобы захватить нужную мне информацию. Затем я хочу взять фрагменты этой информации (в данном случае, жанр), чтобы заполнить меню фильтров (нажмите «комедия», если вы просто хотите увидеть комедии и т. Д.).

Я хочу создать объект, содержащий жанры, и использовать его для заполнения моего меню. Моя проблема в том, что меню начинает заполняться, пока мой первоначальный вызов 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); 
} 

Я хочу, чтобы это (на данный момент) на консоль войти пару неразорвавшихся фильмов, а затем длинный, громоздкий массив жанров. Однако сначала запускается консоль populateGenre(), в то время как мои функции getMovieList() и getMovieInfo() все еще работают через длинный список фильмов.

Что мне делать, чтобы отменить функцию populateGenre()? Спасибо за вашу помощь!

Answer 1

полный метод при первом вызове 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].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); 
}