等待異步函數在繼續之前完成

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 
});