비동기 함수가 끝나기를 기다린다.

Question

비동기 함수 콜백에서 오는 값을 변수에 할당하여 다음 함수/코드 행으로 계속 전달하기를 원한다.

내 jsfiddle에서 Soundcloud 트랙 API 요청의 가치를 얻고 자하는 것은 제목 변수입니다. 내가 의미하는 바를보기를 바란다. 그렇지 않다면 나는 더 설명하기 위해 다시 올 것이다.

jsfiddle

는 최근 비동기 기능이 작동 방법을 이해하기 시작했다, 그래서 내 코드는 실제로 작동하지 않는 이유를 나는 이해합니다. 내가 찾고있는 것은 변수가 playerData가 타이틀이 할당 될 때까지 실행되도록 대기시키는 방법이다.

가능하지 않은 경우 원하는대로 작동하도록하는 방법에 대한 다른 팁에 감사드립니다.

감사합니다.

ps. 내 실제 페이지에서 모든 "플레이어"div에는 다른 아티스트의 플레이어가 포함됩니다.

주석 라인은 비동기 문제가 아니었다면 나는 그것을 넣어 가지고 얼마나 내 jsfiddle에서

관련 자바 스크립트 : 당신이 대기 할 경우 그 작업이 실행되는 때까지

$(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

내가 당신을 추천합니다 혼자 그렇게처럼 $.when 기능으로 각 요청의 약속을 체인 것이다 jQuery로이 https://github.com/kriskowal/q

Answer 2

같은 몇 가지 약속 프레임 워크를 사용하는 :

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

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

나는 사운드 클라우드 API는 jQuery를 약속을 반환 의심,하지만 난 당신이 jQuery를 약속 반환하는 SC.get 기능을 래핑 할 수 같아요

이제

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