如何构建JavaScript回调队列并执行具有最终回调的队列

Question

我正在用javascript做一些动画或类似卡通的事情。 动画具有一些脚本，这些脚本按顺序执行一些指令，例如在画布上绘画事物和播放声音。 有些脚本必须执行多次。 因此，要执行脚本0、1、2、3、4（3次），然后执行5，以制作完整的动画序列。 我的代码如下所示：

        var player = new TTMPlayer(resource["MJJOG.TTM"], ctx);
        player.playscript(0, function () {
            player.playscript(1, function () {
                player.playscript(2, function () {
                    player.playscript(3, function () {
                        player.playscript(4, function () {
                            player.playscript(4, function () {
                                player.playscript(4, function () {
                                    player.playscript(5, function () {
                                        alert("done");
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });

TTMPlayer加载了所有不同的脚本序列。 “播放脚本”函数处理所有绘制例程（有延迟等），并且在完成一个脚本时，它将调用回调函数，而该回调函数只是另一个将依次播放下一个脚本的播放脚本调用。 我希望能够制作一个数组或脚本队列，并使它执行起来更加简单，如下所示：

player.playscripts([0,1,2,3,4,4,4,5], function () { alert("done"); }));

但是如何在JavaScript代码中实现呢？

Answer 1

一种方法是使用包含您要用来调用playscript的数字的数组，然后遍历该数组并await一个Promise ，该Promise在调用playscript回调时解决：

(async () => {
  const player = new TTMPlayer(resource["MJJOG.TTM"], ctx);
  const playProm = num => new Promise(resolve, () => {
    player.playscript(num, resolve);
  });
  const arr = [0,1,2,3,4,4,4,5];
  for (let i = 0; i < arr.length; i++) {
    await playProm(arr[i]);
  }
  console.log('done');
})();

另一种选择是使用reduceRight ：

const player = new TTMPlayer(resource["MJJOG.TTM"], ctx);
const arr = [0,1,2,3,4,4,4,5];
const firstFn = arr.reduceRight(
  (nextCallback, num) => () => player.playscript(num, nextCallback),
  () => console.log('done')
);
firstFn();