Verzögern einer JQuery-Funktion, bis eine andere JQuery-Funktion ausgeführt wird

Question

Ich habe eine (leicht gewundene) Reihe von Funktionen zum Auffüllen des DOM mit Informationen. Um zu beginnen, mache ich einen Anruf zu einem personalisierten JSON mit einer Liste von Filmen, die wiederum die OMDb-API für jeden Film aufrufen, um die gewünschten Informationen zu erhalten. Ich möchte dann Teile dieser Information (in diesem Fall Genre) nehmen, um ein Filtermenü zu füllen (klicken Sie auf "Komödie", wenn Sie nur Komödien sehen möchten, usw.).

Ich möchte ein Objekt erstellen, das die Genres enthält und dieses zum Auffüllen meines Menüs verwenden. Mein Problem ist, dass das Menü anfängt aufzufüllen, während mein anfänglicher AJAX-Anruf noch funktioniert. Ich habe mit "wann" versucht, aber es scheint nicht richtig zu sein.

Wie kann ich eine Instruktion einstellen, die nur das Genre-Menü füllt, sobald alle Filminformationen abgerufen wurden?

My (gekürzt) Code bisher:

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

Ich mag diese (zur Zeit) ein paar Blindgänger Filme auf der Konsole einloggen und dann eine lange, unhandliche Reihe von Genres. Die populateGenre() - Konsole protokolliert jedoch zuerst, während meine Funktionen getMovieList() und getMovieInfo() immer noch die lange Liste von Filmen durcharbeiten.

Was soll ich tun, um die populateGenre() -Funktion zurückzudrängen? Danke für Ihre Hilfe!

Answer 1

Die vollständige Methode des ersten Ajax-Aufrufs wartet nicht auf nachfolgende Aufrufe anderer Threads. Sie müssen die Erfolgsmethode der nachfolgenden Aufrufe verwenden, um zu wissen, dass alle Daten geladen sind.

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