javascript - 等到所有 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 将尝试在第一个命令完成之前执行第二个命令。

现在，处理这个问题的正确方法是使用 promises。像这样的东西:

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

这完全是一种选择。 (事实上​​，这可能是我必须接受的。)但是我不想走这条路有两个原因。首先，它在本来应该是一个简单的脚本的基础上增加了很多额外的措辞。我希望这对新程序员来说看起来并不吓人，所有这些嵌套函数都会开始看起来很可怕。其次，promises 不能很好地处理控制流。即使像 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

it adds a lot of extra verbiage to what is meant to be a simple script. I'd like this to look unintimidating to new programmers, and all those nested functions are gonna start looking scary.

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

顺便说一句，你应该差不多never have to nest functions当使用 promises 而不是回调时，因为 promises 形成一个扁平链。

Secondly, promises don't handle control flow super well. Even something as simple as an if-then statement will get gnarly.

在我看来，他们比大多数其他选项做得更好。参见 this example一个简单的 if 语句。

What I'd really like is some way to do this:

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

But that's a pipedream, isn't it?

不一定——有生成器，最终会有异步/等待。这些允许您在异步函数中使用“同步”(正常)控制流语句:

(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 转译器。

然而，即使是简单的

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

第一个效果之后的第二个效果在今天是很有可能的!您只需在 this 上放置一个内部动画队列，backdrop 方法将向其添加而不是立即执行。例如，jQuery 确实使用了这种方法，而且非常流行!