Как построить очередь обратного вызова 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 a 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();