RxJS: 事件节流 - throttleTime 方法

下面要实现一个点击事件每秒触发一次的功能.

常规写法:

let begin = Date.now();
document.addEventListener("click", () => {
  if (Date.now() - begin >= 1000) {
    console.log("一秒只会触发一次");
    begin = Date.now();
  }
});

RxJS 版:

import { fromEvent, scan, throttleTime } from "rxjs";
fromEvent(document, "click")
  .pipe(
    throttleTime(1000),
    scan((count) => count + 1, 0)
  )
  .subscribe((count) => {
    console.log("一秒只会触发一次" + String(count));
  });

这里多了一个 scan, 是为了演示 pipe 方法的作用, pipe(管道) 现在可以理解成一条数据流入的管子. 这里"数据"可以抽象成"逻辑流", 也就是说: 从点击事件发生开始, 逻辑的执行流程, 会进入 pipe 函数, 依次执行, 首先是流入 throttleTime. 它会将事件稀释到1000毫秒触发一次, 相当于一个"拦截规则"或者"守卫", 当允许数据流往下走以后, 又到了 scan 管子里, 这时就来了一个"新朋友" count, 它会进行类似 reduce 的操作, 将数据处理好, 然后送往 subscribe 函数中. 整个流程是非常清晰的. 因为pipe管道组合了各种"流"的相关操作, 令逻辑更为内聚.