等到所有的promise都在JavaScript中解决

Question

我不乐观有办法做到这一点，但我想提出这个问题。情况：我正在写一个为新手程序员量身定制的JavaScript游戏引擎。我希望主脚本界面尽可能简单和可访问。理想情况下，脚本最终会看起来像这样：

this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000, sync: true });
this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });

在这个场景中，第一个背景会在一秒钟内完全淡入，然后第二个背景会同步淡入。问题出在哪里？JavaScript将在第一个命令完成之前尝试执行第二个命令。

现在，正确的处理方法是使用promise。类似的东西：

this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000 }).then(() => {
  this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });
});

这完全是一种选择。（事实上，这可能是我不得不接受的。）但我不想走这条路有两个原因。首先，它在一个简单的脚本中添加了很多额外的措辞。我希望这对新程序员来说是不胆小的，所有这些嵌套函数都会开始让人害怕。其次，promise不能很好地处理控制流。即使像if-then这样简单的语句也会变得粗糙。

我真正想要的是这样做的方法：

this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000, sync: true });
waitUntilAllPromisesAreResolved();
this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });

但那是一个白日梦，不是吗？如果你能想个办法让它成为现实，我很乐意听你这么说。

Answer 1

它为一个简单的脚本增加了很多额外的措辞。我希望这对新程序员来说是不胆小的，所有这些嵌套函数都会开始让人害怕。

嗯，这比用魔法完成的脚本要好得多（当然可能，见下文）。大多数新手将能够弄清楚然后会做什么，但他们将无法识别魔法-并且当某些东西不起作用时，他们会完全困惑。

顺便说一句，当使用promise而不是回调时，你几乎不应该嵌套函数，因为promise形成了一个扁平的链。

其次，promise不能很好地处理控制流。即使像if-then这样简单的语句也会变得粗糙。

他们比大多数其他选择做得更好。请参阅这个简单的if语句示例。

我真正想要的是这样做的方法：

this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000, sync: true });
waitUntilAllPromisesAreResolved();
this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });

但那是一个白日梦，不是吗？

不一定——有发电机，最终会有异步/等待。允许您在异步函数中使用同步（普通）控制流语句：

(async function() {
    await this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000});
    await this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });
    console.log("both done");
}()); // returns a promise

不过，您必须使用ES6/ES7 transpiler进行这些操作。

然而，即使是一个简单的

this.backdrop('backdrop-1.png', { effect: 'fade-in', duration: 1000, sync: true });
this.backdrop('backdrop-2.png', { effect: 'fade-in', duration: 500 });

在第一个效果之后的第二个效果在今天是非常可能的！您只需要在this上放置一个动画的内部队列，背景方法将添加到该队列中，而不是立即执行。jQuery确实使用了这种方法，并且非常流行！