如何用RxJs实现用户闲置30秒自动恢复视频播放功能

完全可以用RxJS实现该需求，相比手动管理setTimeout的方案，RxJS的声明式写法逻辑更清晰，也能避免手动清理定时器遗漏导致的内存泄漏问题。因为你的原有代码使用了Angular的@HostListener，以下给出适配Angular项目的实现：

实现思路 #

1. 合并所有需要监听的用户活动事件（点击、鼠标移动等）为统一的事件流
2. 仅当视频处于暂停状态时，才监听用户活动，每次触发活动自动重置30秒倒计时
3. 30秒内没有新的用户活动时，自动触发视频恢复播放逻辑
4. 组件销毁时自动清理所有订阅，避免内存泄漏

完整代码示例 #

首先导入需要的RxJS依赖：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { fromEvent, merge, Subject, timer } from 'rxjs';
import { filter, switchMap, takeUntil } from 'rxjs/operators';

组件逻辑实现：

@Component({
  // 你的组件配置
})
export class VideoPlayerComponent implements OnInit, OnDestroy {
  // 销毁信号，用于组件卸载时统一取消所有RxJS订阅
  private destroy$ = new Subject<void>();
  // 标记视频当前是否处于暂停状态
  private isVideoPaused = false;

  ngOnInit(): void {
    // 合并所有需要监听的用户活动事件流
    const userActivity$ = merge(
      fromEvent(window, 'click'),
      fromEvent(window, 'mousemove')
      // 后续需要新增监听的活动（比如滚动、键盘输入）直接在这里追加即可
    );

    userActivity$.pipe(
      // 仅当视频处于暂停状态时才执行后续倒计时逻辑
      filter(() => this.isVideoPaused),
      // 每次收到用户活动，自动取消上一个未完成的倒计时，重新开启30秒计时
      switchMap(() => timer(30000)),
      // 组件销毁时自动取消订阅，避免内存泄漏
      takeUntil(this.destroy$)
    ).subscribe(() => {
      // 30秒无用户活动，恢复视频播放
      this.resumeVideo();
    });
  }

  // 点击视频触发暂停逻辑
  @HostListener('click', ['$event'])
  onVideoClick(): void {
    this.pauseVideo();
  }

  private pauseVideo(): void {
    // 替换为你的实际暂停视频代码
    console.log('视频已暂停');
    this.isVideoPaused = true;
  }

  private resumeVideo(): void {
    // 替换为你的实际恢复播放代码
    console.log('30秒无操作，自动恢复播放');
    this.isVideoPaused = false;
  }

  ngOnDestroy(): void {
    // 发送销毁信号，取消所有订阅
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案优势 #

• 无需手动维护setTimeout的id，也无需每次触发用户活动时手动调用clearTimeout，switchMap操作符会自动处理上一个未完成的计时器订阅
• 订阅统一管理，不会出现定时器清理遗漏导致的内存泄漏问题
• 扩展性强，后续需要新增监听的用户行为只需要在merge中追加对应事件流即可，不需要修改核心逻辑

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