等待異步功能完成，然后再繼續

Question

我希望為變量分配一個值，該值來自異步函數回調，然后再繼續執行下一個函數/代碼行。

在我的jsfiddle中，這是我想要獲取Soundcloud track API請求值的標題變量。 希望您明白我的意思，否則我會再進一步​​解釋。

jsfiddle

我最近開始了解異步函數的工作原理，因此我了解了為什么我的代碼無法真正起作用。 我正在尋找的是一種使變量playerData等待運行直到標題被分配的方法。

如果這不可能，我將不勝感激，希望獲得其他提示，以幫助我按需進行操作。

謝謝！

附言 在我的真實頁面中，每個“玩家” div都將包含具有不同藝術家的玩家。

來自我的jsfiddle的相關javascript，如果不是針對異步問題，則注釋行是我將如何放置它：

$(document).ready(function() {
var source = document.getElementById( 'player-template' ).innerHTML;
var playerTemplate = Handlebars.compile( source );

SC.initialize({
  client_id: '90fb9e15c1e26f39b63f57015ab8da0d'
});


var title1;
var title2;

  SC.get("/users/theshins/tracks", function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player1'));
      //title1 = tracks[0].title;
  });
  SC.get("/users/theshins/tracks", function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player2'));
      //title2 = tracks[0].title;
  });
  SC.get("/users/theshins/tracks", function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player3'));
  });
  SC.get("/users/theshins/tracks", function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player4'));
  });
  SC.get("/users/theshins/tracks", function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player5'));
  });
  SC.get("/users/theshins/tracks", function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player6' ));
  });


//Data that will replace the handlebars expressions in our template
var playerData = {
    title1 : title1,
    title2 : title2,
};

$('#player-placeholder').html(playerTemplate(playerData));

});

Answer 1

僅使用jQuery，就可以將每個請求的承諾與$.when函數鏈接在一起，如下所示：

var a = $.get("/a");
var b = $.get("/b");
var c = $.get("/c");

$.when(a, b, c).then(function() {
   // render template here
});

我懷疑soundcloud API是否會返回jQuery Promise，但我想您可以包裝SC.get函數來返回jQuery SC.get ：

function wrapGet(url) {
    var deferred = $.Deferred();
    SC.get(url, function(result) {
        deferred.resolve(result);
    });
    return deferred.promise();
}

現在您可以這樣稱呼它：

var a = wrapGet("/users/theshins/tracks").then(function(tracks){
  SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player1'));
      //title1 = tracks[0].title;
  });

var b = ...


$.when(a, b, ...).then(function() {
   // render template here
});

Answer 2

如果您想等到這些任務執行完畢，我建議您使用類似https://github.com/kriskowal/q的 Promise框架。