等待异步功能完成，然后再继续

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框架。