javascript - 努力兑现 promise

我有两个功能。第一个是运行一定时间的animationFunction()。第二个是parentFunction()，在dispatch()停止循环后，需要运行一个称为animationFunction()的函数才能运行。 dispatch()只能从父函数中调用:

const animationFunction = (args) => {
  const duration = 1000;

  //init animation function stuff...

  //draw loop
  const loop = drawLoop(({ time }) => {
    if (time > duration) {
      loop.stop();
    }
  });
};

const parentFunction = () => {
  animationFunction(args);
  //dispatch be run after animationFunction is done looping
  dispatch();
}

我认为animationFunction()可以被认为是异步的，因为它需要一定的时间来循环执行程序。我想出了一种方法，在dispatch()完成循环后，使用回调使animationFunction()在父函数中运行，但是我对如何使用基于Promise的实现感到困惑。这是我的回调解决方案:

const animationFunction = (args, callback) => {
  const duration = 1000;

  //init animation function stuff...

  //draw loop
  const loop = drawLoop(({ time }) => {
    if (time > duration) {
      loop.stop();
      callback();
    }
  });
};

const parentFunction = () => {
  animationFunction(args, () => {
    //dispatch should be run after animationFunction is done looping
    dispatch();
  });
}

我对基于Promise的解决方案感到困惑。我尝试这样做:

const animationFunction = (args) => {
  const duration = 1000;

  //init animation function stuff...

  //draw loop
  const loop = drawLoop(({ time }) => {
    if (time > duration) {
      loop.stop();
      return new Promise((resolve, reject) => {
        resolve();
      });
    }
  });
};

const parentFunction = () => {
  animationFunction(args).then(() => {
    dispatch();
  });
}

但这似乎不起作用。我究竟做错了什么？

最佳答案

您将返回的 promise 不是返回给animationFunction的调用方，而是返回给可能未处理的drawLoop范围(从示例中很难看出，因为大多数代码都丢失了)。

取而代之的是，从animationFunction返回一个 promise ，并在计时器启动时对其进行resolve。这是一个最小的，可重复的示例:

const animationFunction = () => {
  const duration = 10;
  let ticks = 0;
  return new Promise((resolve, reject) => {
    (function update() {
      console.log(ticks++);

      if (ticks >= duration) {
        return resolve("some optional data");
      }

      requestAnimationFrame(update);
    })();
  });
};

animationFunction().then(data => {
  console.log("dispatched: " + data);
});