如何在RxJS中每3秒仅获取首次输入？

当前代码用debounce操作符会等待3秒，期间新调用会覆盖之前的值，最终输出最后一次调用的结果。要获取首次调用的结果，可根据需求选择以下方案：

方案1：全局仅追踪首次调用 #

如果需要整个服务生命周期内只处理第一次调用，后续所有调用都忽略，用take(1)操作符即可：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class MyService {
  sub = new Subject<string>();

  constructor() {
    this.sub.pipe(take(1)).subscribe((val) => {
      console.log(val);
    });
  }

  writexy(x: string) {
    this.sub.next(x);
  }
}

不管组件1、2调用多少次，只会输出第一次调用的1，后续的2不会被处理。

方案2：按时间窗口追踪首次调用 #

如果需要每3秒周期内只处理该周期的第一次调用（3秒内多次调用仅保留第一个，3秒后可接收新的首次调用），用throttleTime(3000)操作符：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class MyService {
  sub = new Subject<string>();

  constructor() {
    this.sub.pipe(throttleTime(3000)).subscribe((val) => {
      console.log(val);
    });
  }

  writexy(x: string) {
    this.sub.next(x);
  }
}

3秒内先后调用1和2时，仅输出1；3秒后再调用2，会输出2。

操作符说明 #

• take(1)：仅获取流的第一个值，订阅完成后不再接收任何值，适配全局仅需首次调用的场景。
• throttleTime(3000)：指定时间窗口内仅保留第一个值，窗口结束后恢复接收新的首次调用，适配周期性需求场景。

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