AJAX 요청이 JQuery에서 완료 될 때까지 기다리는 방법?

Question

나는 4 개의 서로 다른 JQuery AJAX 함수를 가지고 있는데, 각각은 last.fm API에서 다른 정보를 가져온다. 이 정보는 툴팁으로 결합되어야합니다.

1. 는 주어진 트랙 & 아티스트의 앨범을 가져옵니다 :

   이

   제 4 개 함수입니다. 트랙 이름을 반환합니다.
2. 아티스트 이미지를 가져옵니다. 1 개의 URL을 반환합니다.
3. 아티스트의 상위 3 개 앨범을 가져옵니다. 3 개의 캐릭터 라인의 배열을 돌려줍니다.
4. 주어진 아티스트의 1 위 트랙을 가져옵니다. 트랙 이름을 반환합니다.

 

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 요청이 완료되기를 기다리고 싶습니다. 모든 요청 toolTip.html(...)를 호출하기 전에 완료 될 때까지 어떻게 기다릴 것

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

:

여기 내 툴팁의 코드인가?

Answer 1

각 요청을 저장 한 다음 $.when을 사용하여 단일 지연 개체를 만들어 모두 수신 대기합니다.

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

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