RxJS实现repeat每次重复时执行defer内代码生成随机延迟

问题分析 #

你的代码中，repeat操作符被放在了defer内部的Observable管道中，这意味着只有第一次订阅时会执行defer内的逻辑（生成随机延迟、打印信息），后续重复执行时会复用最初生成的延迟值，不会重新触发defer的代码。

修改后的代码 #

import { Observable, defer, repeat, delay } from 'rxjs'

const randNum = () => Math.floor(Math.random() * 10) + 1

const myObs = () => {
  return defer(() => {
    const delaySec = randNum()
    console.log('It will be delayed by', delaySec, ' seconds')
    // 先生成延迟并打印，再延迟对应时间后输出值
    return new Observable((subscriber) => {
      subscriber.next('hey there')
      subscriber.complete()
    }).pipe(delay(delaySec * 1000))
  }).pipe(repeat()) // 将repeat移到defer外部，每次重复都会重新执行defer内的逻辑
}

myObs().subscribe((val) => {
  console.log('this is the val', val)
})

逻辑说明 #

1. defer的作用：每次订阅（包括repeat触发的重复订阅）都会执行其内部的函数，因此每次都会重新生成随机延迟并打印信息。
2. delay操作符：在defer内部的Observable中添加delay，确保生成延迟后等待对应时间再输出值。
3. repeat的位置：将repeat放在defer外部，使得每次重复都会重新订阅defer返回的Observable，从而完整执行"生成延迟→打印→等待→输出值"的流程。

这样修改后，就能实现你期望的输出效果：每次重复都会生成新的随机延迟，按顺序打印延迟信息、等待后输出值。

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