角度异步调用答案

【问题标题】：Asynchroneous call in angular角度异步调用
【发布时间】：2021-04-23 07:00:42
【问题描述】：

有一个通知动画，当单击关闭按钮时，我会显示一个类似弹出窗口的关闭（反向动画）。如果有另一个通知，它会等待 1.5s 并播放动画。

我正在使用带有承诺的 async/Await。这件事似乎不起作用。它会立即执行，因此我不播放动画。

这是我的打字稿代码

async waitAsync() {
        return new Promise<boolean>((resolve, reject)=> {delay(1500); resolve(true);});

    }

// called on close button click
toggleNotif() {
        this.hide = true;
        this.animateWithdraw = true;
        this.toggleAnimation();
        this.currentIdx++;
        this.checkForNextAlert();

    }

// checks for new notification and plays the animation consequently.
    checkForNextAlert() {
        if (this.currentIdx < this.maxProjToAlert) {

            console.log(this.projectsToAlert[this.currentIdx].name);
            this.setAlertMsg(this.projectsToAlert[this.currentIdx].name);

            (async()=> {
                const val = await this.waitAsync();
                this.animateWithdraw = false;
                this.toggleAnimation();
            })();


            // tslint:disable-next-line:no-console
            // this.animateWithdraw = await NotificationComponent.waitFunction();
            // tslint:disable-next-line:no-console

        }
    }

// Affects some CSS class so the css3 animation gets played.
    toggleAnimation():string {
        if(!this.animateWithdraw) {
           return 'notif notifAnimate';
        }
        return 'notif notifWithdraw';
    }

【问题讨论】：

标签： angular typescript async-await

【解决方案1】：

是 rxjs 延迟吗？你应该试试：

return of({}).pipe(delay(1500)).toPromise();

附：为什么不简单：

setTimeout(() => {
    this.animateWithdraw = false;
    this.toggleAnimation();
}, 1500)

【讨论】：

谢谢，它运行良好。我不明白为什么 rxjs 延迟的工作方式如此不同。将 setTimeout 简单的方式放在一边。它看起来不错。与 Android 上的 Handler 线程非常相似。