延遲JQuery函數，直到另一個JQuery函數運行

Question

我有一個（稍微複雜）的函數集來填充DOM的信息。首先，我打電話給帶有電影列表的個性化JSON，然後調用每個電影的OMDb API來獲取我想要的信息。然後，我想要收集這些信息（在這個例子中，流派），以填充過濾菜單（如果您只想看喜劇等，請點擊「喜劇」）。

我想創建一個包含流派的對象並使用它來填充我的菜單。我的問題是，當我最初的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); 
}