等待异步函数在继续之前完成

Question

我希望在继续下一个函数/代码行之前为变量分配一个来自异步函数回调的值。

在我的jsfiddle中，标题变量是我想要获取Soundcloud track API请求的值。希望你明白我的意思，否则我会回来进一步解释。

jsfiddle

最近我开始理解异步函数是如何工作的，让我明白了为什么我的代码，并没有真正的工作。我正在寻找的是一种让变量playerData等待运行直到标题被分配的方法。

如果这是不可能的，我会很感激其他技巧，如何让这个工作，因为我想。

谢谢！

Ps。在我的真实网页中，每个“玩家”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("https://stackoverflow.com/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("https://stackoverflow.com/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("https://stackoverflow.com/users/theshins/tracks", function(tracks){ 
    SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player3')); 
    }); 
    SC.get("https://stackoverflow.com/users/theshins/tracks", function(tracks){ 
    SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player4')); 
    }); 
    SC.get("https://stackoverflow.com/users/theshins/tracks", function(tracks){ 
    SC.oEmbed(tracks[0].permalink_url + "/&maxheight=100&maxwidth=300&format=json&sharing=false", document.getElementById('player5')); 
    }); 
    SC.get("https://stackoverflow.com/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

如果你想等到正在执行任务的那些我建议你使用这样https://github.com/kriskowal/q

Answer 2

使用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的承诺，但我想你可以包装SC.get函数返回jQuery的承诺：

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

现在你可以这样调用：

var a = wrapGet("https://stackoverflow.com/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 
});