第二次调用 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 runaboutAnimation = 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}因此，您需要通过解决或拒绝来解决承诺。然而，从你的逻辑来看，你只想反转动画，所以也许你不需要返回任何东西。