Angular中如何限制函数调用：2000ms内仅接受一次BehaviorSubject.next

问题代码 #

组件点击事件：

public wasClicked(){
    this.myService.writexy('1')
}

服务实现：

sub = new BehaviorSubject(1);

writexy(x){
    this.sub.next(x)
    this.sub.pipe(
      throttle(val => interval(2000)),
      //debounce(val => interval(6000)),
      //debounceTime(2000),
      take(1)
    ).subscribe(() =>  console.log('2'))
}

核心错误 #

你每次调用writexy时，都会新建一个独立的订阅。也就是说，每点击一次按钮，就会给sub绑定一个全新的Observable管道，这些管道彼此独立执行节流/防抖逻辑，所以每个订阅都会触发一次日志输出，完全起不到限流的作用。

正确实现方式 #

要实现“2000ms内仅打印一次”的效果，需要只创建一次订阅，在服务初始化时完成监听，writexy只负责发送值即可：

import { BehaviorSubject, Subject, throttleTime, debounceTime } from 'rxjs';

// 若不需要初始值，建议换成Subject
sub = new BehaviorSubject(1);

constructor() {
  // 初始化时一次性创建订阅，复用同一个管道
  this.sub.pipe(
    // 选择适合的限流操作符：
    throttleTime(2000) // 2000ms内仅响应第一次点击
    // debounceTime(2000) // 最后一次点击后等待2000ms才响应
  ).subscribe(() => console.log('2'));
}

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

补充说明 #

• 使用BehaviorSubject时，初始化订阅会立即触发一次日志（因为它会发送初始值），如果不需要这个初始触发，直接替换成Subject即可。
• throttleTime和debounceTime是更简洁的操作符，不需要手动返回interval，推荐优先使用。

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