如何等待AJAX​​請求在JQuery中完成？

Question

我有4個不同的JQuery AJAX函數，每個函數都從last.fm API獲取不同的信息。此信息必須在工具提示中連接在一起。

這是我的4個功能：

1. 獲取給定的軌道&藝術家的專輯。返回曲目名稱。
2. 獲取藝術家形象。返回1個URL。
3. 獲取該藝術家的前三張專輯。返回3個字符串的數組。
4. 獲取給定藝術家的排名第一的最佳曲目。返回曲目名稱。

 

var getTrackAlbum = function(track, artist) { 
    $.getJSON(
     settings.PHP_REQUEST_URL, 
     { 
     method: "track.getInfo", 
     api_key : settings.LASTFM_APIKEY, 
     track : track, 
     artist : artist, 
     format : "json" 
     }, 
     function(data) { 
     return data.track.album.title; 
     }); 
} 

var getArtistImage = function(artist) { 
    var options = { 
     artSize: 'medium', 
     noart: 'images/noartwork.gif', 
    } 

    if(options.artSize == 'small'){imgSize = 0} 
    if(options.artSize == 'medium'){imgSize = 1} 
    if(options.artSize == 'large'){imgSize = 2} 

    $.getJSON(
     settings.PHP_REQUEST_URL, 
     { 
     method: "artist.getInfo", 
     api_key : settings.LASTFM_APIKEY, 
     artist : artist, 
     format : "json" 
     }, 
     function(data) { 
     return stripslashes(data.artist.image[imgSize]['#text']); 
     }); 
} 

var getArtistTopAlbums = function(artist) { 
    var albums = new Array(); 

    var onComplete = function() { 
     return albums; 
    } 

    $.getJSON(
     settings.PHP_REQUEST_URL, 
     { 
     method: "artist.getTopAlbums", 
     api_key : settings.LASTFM_APIKEY, 
     artist : artist, 
     format : "json" 
     }, 
     function(data) { 
     $.each(data.topalbums.album, function(i, item){ 
      albums[i] = item.name; 

      if(i == 2) { 
      onComplete.call(this); 
      return; 
      } 
     }); 
     }); 
} 

var getArtistTopTrack = function(artist) { 
    $.getJSON(
     settings.PHP_REQUEST_URL, 
     { 
     method: "artist.getTopTracks", 
     api_key : settings.LASTFM_APIKEY, 
     artist : artist, 
     format : "json" 
     }, 
     function(data) { 
     return data.toptracks.track[0].name; 
     }); 
} 

我已決定反對這樣做重用目的的唯一方法內的所有請求。但是，現在我想在設置我的工具提示的HTML之前等待所有的AJAX請求完成。

這裏是我的工具提示代碼：

$('.lfm_info').on('mouseover', function(){ 
      var toolTip = $(this).children('.tooltip'); 

      var trackhtml = $(this).parent().children('.lfm_song').html().split("."); 
      var track = trackhtml[1].trim(); 
      var artist = $(this).parent().children('.lfm_artist').html(); 

     // needs to wait until the AJAX is done!  
     toolTip.html('html here'); 

     $('#tracks').mouseleave(function(){ 
     if(toolTip.is(':visible')){ 
      toolTip.fadeOut(500); 
     };  
     }); 

     toolTip.fadeIn(500);  
     }); 
} 

我怎麼會等待所有請求調用toolTip.html(...)前完成？

Answer 1

存儲每個請求，然後使用$.when來創建單個延遲對象來偵聽它們全部完成。

var req1 = $.ajax({...}); 
var req2 = $.ajax({...}); 
var req3 = $.ajax({...}); 

$.when(req1, req2, req3).done(function(){ 
    console.log("all done") 
});