如何设置条件判断两次鼠标点击间隔不超过500毫秒（优先使用RxJS操作符）

针对需求核心要改造wait$流的逻辑，新增双击间隔校验，用timestamp、bufferCount操作符实现双击判定即可，完整修改后的代码如下：

import { interval, Subject, merge, EMPTY } from 'rxjs';
import { mapTo, filter, timestamp, bufferCount, startWith, switchMap, scan } from 'rxjs/operators';

// 计时器核心流，每秒输出1
const observable$ = interval(1000).pipe(mapTo(1));
// 全局动作流：点击开始/继续按钮传true，点击wait按钮传false
const action$ = new Subject();
// 开始/继续信号流
const start$ = action$.pipe(filter(action => action === true));
// 改造后的暂停信号流：仅连续两次点击间隔≤500ms时才发出暂停指令
const wait$ = action$.pipe(
  // 只筛选wait按钮触发的false事件
  filter(action => action === false),
  // 给每个点击事件打时间戳用于计算间隔
  timestamp(),
  // 滑动缓存最近2次点击事件，新点击触发时更新缓存
  bufferCount(2, 1),
  // 过滤首次点击缓存不足2条的无效数据
  filter(events => events.length === 2),
  // 校验两次点击间隔不超过500ms
  filter(([prevClick, currClick]) => currClick.timestamp - prevClick.timestamp <= 500),
  // 映射为统一的暂停信号
  mapTo(false)
);

const timer$ = merge(wait$, start$)
  .pipe(
    startWith(true),
    // 状态为true时启动计时器，false时清空流实现暂停
    switchMap(val => (val ? observable$ : EMPTY)),
    scan((acc, curr) => (curr ? curr + acc : acc))        
  )

逻辑说明 #

• 点击wait按钮时统一给action$推送false值，所有点击事件先进入wait$流做双击校验
• 用bufferCount(2,1)实现滑动窗口缓存最近2次点击，避免固定时间窗口漏判双击的问题
• 时间戳校验严格匹配两次点击间隔不超过500ms的触发规则
• 原有计时器计数、启停逻辑无需修改，仅通过wait$流输出的信号控制状态切换即可

内容的提问来源于stack exchange，提问作者Александр Соколов