等待异步函数完成后再继续

Wait for asynchronous function to finish before proceeding

本文关键字：再继续 异步 函数 等待      更新时间：2023-09-26

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

在我的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("/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));
});

单独使用jQuery，您可以将每个请求的promise与$.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 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
});

如果你想等到这些任务被执行，我建议你使用这样的promise框架https://github.com/kriskowal/q

相关文章：