javascript - 如何仅在第一个函数完全完成后才运行第二个 Javascript 函数？

Question

我正在使用 HTML 和 Javascript 创建一个 Facebook 游戏，我刚刚构建了一个排行榜表，其中列出了每个玩家的姓名和排名。此表填充了从 Facebook 的游戏分数 API 返回的数据。

这很完美，但我也想奖励提高他们在表格中的排名的玩家。

这就是我打算这样做的方式:

• 游戏加载时，我运行一个名为 updateTable(); 的函数， 这用玩家的分数和排名填充排行榜从对 Facebook 数据库的 API 调用中收到。
• 当玩家开始玩游戏时，我将他们的排名副本存储在一个单独的 Conceal div 中。
• 当游戏结束时，如果玩家获得了新的高分，那么它被输入到数据库中。发生这种情况后，我跑 updateTable();再次更新排行榜。
• 然后我运行一个名为 compareRanks(); 的函数，这比较玩家的新排名与我存储在 Conceal div 中的排名。

如果新排名低于存储排名，那么他们已经在排行榜上上升了，他们每上升一个位置我就会奖励他们 100 个硬币。

例如:

玩家 A 开始游戏并排名第 5(因此“5”存储在 Conceal 的 div 中)。当玩家 A 完成游戏时，排行榜会更新，玩家 A 现在排名第 2(因此玩家跳了 3 位)。

为了计算奖励应该是多少，我想从第二个变量中减去第一个变量 (5-2 = 3)，玩家 A 超过了其他 3 名玩家，因此他们的奖励将是 3 x 100 金币。

我遇到的问题是当我运行 compareRanks(); , 新排名一直显示为与存储排名相同的数字，即使我知道玩家已经提高了他们的排名。

我很确定这是因为新排名在 updateTable(); 之前被抢走了已与数据库完全交互。我通过分离函数来测试这个，通过制作 compareRanks();单击按钮运行，当我这样做时，我完成了一场比赛，提高了我的排名，在 updateTable(); 之后等待了几秒钟跑了，然后点击按钮，两个排名显示不同，这是正确的。所以我觉得compareRanks();只需要等待updateTable();在运行之前完全完成。

我的功能是这样布局的:

updateTable(){
//code here interacts with the database/makes a call using Facebook's API, 
//and populates the leaderboard table with the returned data
}

在新游戏开始时，玩家的当前排名存储在 Conceal 的 div 中。

游戏完成时updateTable();再次运行，然后是 compareRanks(); :

compareRanks(){
//code here grabs the stored rank from the hidden div
//code here grabs the newly updated rank and compares the two.
}

我已经阅读了有关使用回调的答案，但我无法让它们发挥作用。我试过这样做:

updateTable(){
{
//code here interacts with the database/makes a call using Facebook's API,
//and populates the leaderboard table with the returned data
}
compareRanks();
};

但是当 compareRanks(); 时，新排名仍然显示为与旧排名相同运行。 updateTable();正在运行时正确更改排行榜上的排名，所以我认为 compareRanks();在 updateTable(); 之前运行完全完成。

如果您能帮助我解决这个问题，我将不胜感激，在此先感谢您!

Answer 1

解决这个问题的一个好方法是使用 Javascript Promises。它们允许您在不嵌套多个回调函数的情况下执行异步操作。

function first (parameter){
  return new Promise(function(resolve,reject){
   //Do async stuff, maybe some ajax

   //When async stuff is finished:
    resolve(async_data);
   //Or when something went wrong:
    reject(error);
 }
}

function second(parameter){
  return new Promise(function(resolve,reject){
   //Do async stuff, maybe some ajax

   //When async stuff is finished:
    resolve(async_data);
   //Or when something went wrong:
    reject(error);
 }
}

//You can then use:
first(data).then(second(async_data)).then(function(async_data){
    //Here would be the point where both functions finished after eachother!
}).catch(function(error){
    //Hey, one of my promises was rejected! Maybe I should handle that error :)
});

这带来了一些优势。您可以将任意数量的函数和操作放入 .then 链中，而无需嵌套大量回调函数。您还可以使用 .catch() 访问 reject() 调用。您应该考虑阅读 Promises 的文档，因为还有更多您应该感兴趣的功能。

如果您不想参与 Promises(它们使您的代码更清晰，因为它们可组合，因此您可以创建非常清晰的 promises 链)，您可以查看一些其他使用回调的 awnsers(对于这么小的用例来说还不错)。

这是一篇关于它的精彩文章:Article: JavaScript Promises