如何在第一个事件触发后执行第二个事件，以touchmove后触发scroll为例

API 探路者

2026-9-26

事件顺序触发解决方案

你要的 touchmove 结束后再响应 scroll 事件的需求可以通过 RxJS 操作符实现。你提供的现有代码存在语法错误：tap 操作符的回调函数缺少闭合括号，修正并优化后的实现如下：

fromEvent(window, 'touchmove').pipe(
  tap(() => this.scroll$.next(false)),
  debounceTime(100)
).subscribe(() => {
  this.scroll$.next(true);
})

逻辑说明

每次 touchmove 触发时，立刻通过 this.scroll$.next(false) 禁用 scroll 相关逻辑
debounceTime(100) 实现防抖：当 touchmove 连续停止触发100ms后，才会执行 subscribe 内的逻辑，将 scroll 状态重新置为可用
后续你只需要在 scroll 事件的回调中判断 this.scroll$ 的值为 true 时再执行业务逻辑即可

进阶实现（直接控制scroll事件流）

如果不想手动判断开关状态，可以直接通过 RxJS 操作符联动两个事件流，自动控制 scroll 事件的触发：

import { fromEvent, EMPTY } from 'rxjs';
import { switchMap, debounceTime, startWith, concatWith } from 'rxjs/operators';

// 定义原始scroll事件流
const originalScroll$ = fromEvent(window, 'scroll');

fromEvent(window, 'touchmove').pipe(
  // touchmove触发时，先停止响应scroll事件
  switchMap(() => EMPTY.pipe(
    // touchmove停止100ms后，重新恢复scroll事件的响应
    concatWith(originalScroll$.pipe(debounceTime(100)))
  )),
  // 初始状态默认响应scroll事件
  startWith(originalScroll$)
).subscribe(scrollEvent => {
  // 此处仅会在touchmove结束后拿到scroll事件，直接处理业务即可
  console.log('有效scroll事件', scrollEvent);
});