关于序列动画的代码帮忙看下需要改进的地方, 还有些不懂的问题

MDN Learn
#1

首先，实现一个能够工作的代码，但它存在“回调地狱”问题（我们在关于回调的讨论中提到过）的 Promise 版本。

先用下callback作对照

function step(target, callback)
{
    target.animate(aliceTumbling, aliceTiming).onfinish = callback;
}

function run()
{
    step(alice1, () => step(alice2, () => step(alice3, run)));
}

run();

Promise版本

function run()
{
    alice1.animate(aliceTumbling, aliceTiming).finished.then(() =>
    {
        alice2.animate(aliceTumbling, aliceTiming).finished.then(() =>
        {
            alice3.animate(aliceTumbling, aliceTiming).finished.then(() => run());
        });
    });
}

run();

接下来，使用 Promise 链来实现它。注意：可以用箭头函数的不同形式来编写这个函数。尝试这些不同的形式。哪个最简洁？哪个可读性最好？

function run()
{
    alice1.animate(aliceTumbling, aliceTiming).finished.then(() => 
    {
        return alice2.animate(aliceTumbling, aliceTiming).finished;
    }).then(() => 
    {
        return alice3.animate(aliceTumbling, aliceTiming).finished;
    }).then(() => 
    {
        run();
    });
}

run();

改成这样可能简洁点, 但是自动缩进好像没办法让每个alice都在同一列…

function run()
{
    alice1.animate(aliceTumbling, aliceTiming).finished.then(() =>
        alice2.animate(aliceTumbling, aliceTiming).finished).then(() =>
            alice3.animate(aliceTumbling, aliceTiming).finished).then(() =>
            { run(); });
}

run();

使用 async 和 await 来实现它。

async function action()
{
    await alice1.animate(aliceTumbling, aliceTiming).finished;
    await alice2.animate(aliceTumbling, aliceTiming).finished;
    await alice3.animate(aliceTumbling, aliceTiming).finished;
    action();
}

action();