第二次调用 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

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

考虑这段代码

if (didAboutMove && aboutAnimation) {

  aboutAnimation.reverse();

  didAboutMove = !didAboutMove;

  return;

}

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

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

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

当你第二次调用它时，didAboutMove标志将为 true，并且你输入 if 块，它只是返回而不解决承诺：

if (didAboutMove && aboutAnimation) {

    aboutAnimation.reverse();

    didAboutMove = !didAboutMove;

    return; // This is the problem

}

因此，您需要通过解决或拒绝来解决承诺。然而，从你的逻辑来看，你只想反转动画，所以也许你不需要返回任何东西。