Question

我希望为变量分配一个值，该值来自异步函数回调，然后继续下一个函数/代码行。

在我的jsfiddle中，我想获得Soundcloud跟踪API请求值的标题变量。希望你明白我的意思，否则我会再回来解释一下。

我最近开始了解异步函数是如何工作的，所以我理解为什么我的代码不能正常工作。我正在寻找的是一种让变量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 promises，但我想你可以包装SC.get函数来返回jQuery promises：

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

在继续之前等待异步功能完成

2 个答案: