我有以下功能。我將該函數構建為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) });};
3 回答
翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
你沒有返回相同的Promise。每次調用時，您都會創建一個新的aboutMove。
考慮這段代碼
if (didAboutMove && aboutAnimation) {
aboutAnimation.reverse();
didAboutMove = !didAboutMove;
return;
}
如果didAboutMove和aboutAnimation都為真，您將退出承諾初始化器并且永遠不會解決承諾。
在調用此方法之前，您很可能需要重置這兩個標志。
呼啦一陣風
TA貢獻1802條經驗 獲得超6個贊
你正在兌現你的承諾，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
神不在的星期二
TA貢獻1963條經驗 獲得超6個贊
當你第二次調用它時，didAboutMove標志將為 true，并且你輸入 if 塊，它只是返回而不解決承諾：
if (didAboutMove && aboutAnimation) {
aboutAnimation.reverse();
didAboutMove = !didAboutMove;
return; // This is the problem
}
因此，您需要通過解決或拒絕來解決承諾。然而，從你的邏輯來看，你只想反轉動畫，所以也許你不需要返回任何東西。
- 3 回答
- 0 關注
- 210 瀏覽
添加回答
舉報
0/150
提交
取消