第二次调用 promise 将无法解决

Question

我有以下功能。我将函数构建为promise. 现在，如果我aboutMove().then(() => {..})第一次打电话，一切正常，并且正在解决。不知何故，稍后在其他地方第二次调用它，该函数将被执行，但未promise解决。怎么会这样？export const aboutMove = () => {    return new Promise(resolve => {        if (didAboutMove && aboutAnimation) {            aboutAnimation.reverse();            didAboutMove = !didAboutMove;            return;        }        didAboutMove = !didAboutMove;        const about = document.querySelector('.about__container');        const inner = document.querySelector('.about__inner');        aboutAnimation = gsap.timeline({            onComplete: () => {                resolve()            }, onReverseComplete: () => {                resolve()            }        })            .to(about, 1, {                duration: 1,                y: 0,                ease: Power2.easeInOut,            })            .fromTo(inner, {                opacity: 0,                y: 500            }, {                duration: 0.8,                opacity: 1,                y: 0,                ease: Power2.easeInOut            }, 0.5)    });};

Answer 1

当您第二次调用它时，该didAboutMove标志将为真，然后您进入 if 块，该块只是返回而不解析承诺：

if (didAboutMove && aboutAnimation) {

    aboutAnimation.reverse();

    didAboutMove = !didAboutMove;

    return; // This is the problem

}

因此，您需要通过解决或拒绝它来解决承诺。但是，从您的逻辑来看，您只是打算反转动画，所以也许您根本不需要返回任何东西。

Answer 2

你正在解决你onComplete的承诺onReverseComplete。gsap.timeline此外，您将从 Promise 函数的回调中返回，基于 didAboutMove && aboutAnimation它不在函数内部的范围内。因此，当您第一次调用该函数时。它设置值didAboutMove等等aboutAnimation，下一次调用解析不会被触发。因为函数之前返回。

if (didAboutMove && aboutAnimation) {

   // This block will execute in second run.

    aboutAnimation.reverse();

    didAboutMove = !didAboutMove;

    return; // Returns from here in second run.

}

didAboutMove = !didAboutMove; // assigned truthy value on first run

aboutAnimation = gsap.timeline // assigned truthy value on first run

Answer 3

你没有返回相同的Promise。每次调用时，您都在创建一个新的aboutMove。

考虑到这段代码

if (didAboutMove && aboutAnimation) {

  aboutAnimation.reverse();

  didAboutMove = !didAboutMove;

  return;

}

如果didAboutMove和aboutAnimation都为真，您将退出承诺初始化程序并且永远不会解决承诺。

您很可能需要在调用此方法之前重置这两个标志。