2

4 つの異なる JQuery AJAX 関数があり、それぞれが last.fm API から異なる情報をフェッチします。この情報は、ツールチップで結合する必要があります。

これらは私の4つの機能です：

  1. 特定のトラックとアーティストのアルバムを取得します。トラック名を返します。
  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 リクエストが完了するのを待ちたいと思います。

ツールチップのコードは次のとおりです。

$('.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(...)ますか?

4

1 に答える 1

14

各リクエストを保存してから、を使用$.whenして単一の遅延オブジェクトを作成し、すべてのリクエストが完了するのをリッスンします。

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

$.when( req1, req2, req3 ).done(function(){
    console.log("all done")
});
于 2012-10-22T20:14:20.023 に答える