Angular中不使用setTimeout如何延迟调用函数？有无rxjs实现方案？

核心思路是改造allData方法返回RxJS Observable对象，让调用方可以感知异步请求的完成状态，分别处理初始化和新增联系人两种场景的逻辑：

1. 首先改造allData方法，保留原有日志逻辑的同时返回Observable流，不在内部完成订阅：

import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

// ...其他组件代码

allData(): Observable<any> {
  return this.accountsService.getContactPerson().pipe(
    tap(data => {
      console.log(data);
    })
  );
}

2. ngOnInit阶段正常调用allData获取数据，不会触发lastAddedItem：

public ngOnInit() { 
  this.allData().subscribe();
  // 若有其他初始化处理逻辑可以写在subscribe的回调里
}

3. 实现recieveNewContact的需求，不用setTimeout，请求完成后自动调用lastAddedItem，如果需要额外加延迟可以插入RxJS的delay操作符：

import { delay } from 'rxjs/operators';

// ...其他组件代码

public recieveNewContact() {
  this.allData()
    .pipe(
      // 不需要额外延迟就删除这行，需要延迟的话填对应毫秒数即可
      delay(100)
    )
    .subscribe(() => {
      this.lastAddedItem();
    });
}

补充优化建议 #

组件销毁时记得取消订阅避免内存泄漏，可以搭配takeUntil操作符实现：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 组件内定义销毁信号
private destroy$ = new Subject<void>();

// 所有订阅处加takeUntil
this.allData()
  .pipe(takeUntil(this.destroy$))
  .subscribe(/* 回调逻辑 */);

// 组件销毁时发射信号
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

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