如何使用另一个Observable控制代码逻辑是否执行？

核心思路是通过状态跟踪定时器是否完成，在Subject的管道中添加过滤逻辑，仅当定时器完成后才执行目标代码。

实现方式一：使用外部状态变量 #

import { Subject, tap, timer, filter } from 'rxjs'

let isTimerCompleted = false;

// 立即订阅定时器，完成后更新状态
timer(3000).subscribe({
  next: () => console.log('success'),
  complete: () => {
    isTimerCompleted = true;
  }
})

const s = new Subject<void>()

s.pipe(
  tap(() => {
    console.log('Execute code immediately')
  }),
  // 过滤定时器未完成时的事件
  filter(() => isTimerCompleted),
  tap(() => {
    // 仅定时器完成后，这段代码才会执行
    console.log('定时器完成后执行的逻辑')
  })
).subscribe()

document.body?.addEventListener('click', () => {
  s.next()
})

实现方式二：用RxJS流管理状态（响应式风格） #

如果想避免外部变量的副作用，可使用BehaviorSubject来管理状态：

import { Subject, tap, timer, filter, BehaviorSubject } from 'rxjs'

const timerCompleted$ = new BehaviorSubject(false);

timer(3000).subscribe({
  next: () => console.log('success'),
  complete: () => timerCompleted$.next(true)
})

const s = new Subject<void>()

s.pipe(
  tap(() => console.log('Execute code immediately')),
  // 基于状态流过滤事件
  filter(() => timerCompleted$.value),
  tap(() => {
    console.log('定时器完成后执行的逻辑')
  })
).subscribe()

document.body?.addEventListener('click', () => {
  s.next()
})

逻辑说明 #

• 初始状态下，定时器未完成，点击触发的Subject事件会被filter拦截，不会执行后续目标逻辑
• 3秒后定时器完成，状态更新为true，此时点击触发的事件会通过过滤，执行目标代码
• 第一个tap不受状态影响，每次点击都会立即执行

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