Angular/TypeScript中delay函数失效：删除成功后无法延迟跳转

你遇到的问题核心是直接调用RxJS的delay(5000)不会产生预期的延迟效果——delay是RxJS专属的管道操作符，只能用于Observable流的处理中，单独调用它不会阻塞后续代码执行，所以页面跳转逻辑会在显示成功消息后立刻触发。

下面是两种可行的修复方案：

方案1：用RxJS的timer实现延迟（符合Angular/RxJS编程风格） #

利用timer(5000)创建一个在5秒后发出值的Observable，通过订阅它来执行跳转逻辑：

// 记得先导入timer
import { timer } from 'rxjs';

public delete(propertyId: number): void {
  if (propertyId !== undefined) {
    this.model.deleteProperty(propertyId)
      .subscribe(data => {
        this.messageService.reportMessage(new Message(`Property ${propertyId} has been successfully deleted.`));
        // 5秒后执行跳转
        timer(5000).subscribe(() => {
          this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
            this.router.navigate([this.state!.returnUrl]);
          });
        });
      });
  }
}

方案2：用原生JavaScript的setTimeout实现延迟 #

如果不想依赖RxJS的API，也可以用原生的setTimeout，把跳转逻辑放在回调函数中：

public delete(propertyId: number): void {
  if (propertyId !== undefined) {
    this.model.deleteProperty(propertyId)
      .subscribe(data => {
        this.messageService.reportMessage(new Message(`Property ${propertyId} has been successfully deleted.`));
        // 5秒后执行跳转
        setTimeout(() => {
          this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
            this.router.navigate([this.state!.returnUrl]);
          });
        }, 5000);
      });
  }
}

内容的提问来源于stack exchange，提问作者Amokachi