如何构建 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 加载了所有不同的脚本序列。 “playscript”函数处理所有绘图例程（有延迟等），当一个脚本完成时，它调用回调函数，该函数只是另一个 playscript 调用，将按顺序播放下一个脚本。 我希望能够创建一个脚本数组或队列，并让它像这样执行更简单：

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

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

Answer 1

一种方法是使用包含您要调用 playscript 的数字的数组，然后遍历数组和 await 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();