rxjs 运算符“延迟”的混淆行为

Question

我对 rxjs operator 有点困惑delay。

当我使用创建的假 observable 对其进行测试时from，我只看到初始延迟：

const { from } = Rx;
const { delay, tap } = RxOperators;

from([1, 2, 3, 4]).pipe(
  tap(console.log),
  delay(1000));

（您可以将此代码片段复制并粘贴到rxviz 中。）

我tap在那里放置了一个以确保from实际将数组项作为单独的值而不是单个数组值发出。

最初的延迟不是我所期望的，但至少文档是这样说的：

[...] 此运算符将源 Observable 时间偏移以毫秒表示的时间量。保留值之间的相对时间间隔。

但是，当我使用从事件创建的 observable 对其进行测试时，我会在每个发出的值之前看到延迟：

const { fromEvent } = Rx;
const { delay } = RxOperators;

fromEvent(document, 'click')
  .pipe(delay(1000))

这里发生了什么？为什么delay在这两种情况下表现不同？

Answer 1

所有的delay不就是这样说的：每当收到一个价值，它拥有为延迟时间该值，然后发射它。它对收到的每个值都做同样的事情。 delay并没有改变它的流中的项之间的相对定时。

所以，当你这样做时from([1,2,3,4]).pipe(delay(1000))，会发生什么：

• 时间 0：from发出 1
• 时间 0：delay看到 1 并启动计时器 1
• 时间 0：from发出 2
• 时间 0：delay看到 2 并启动计时器 2
• ...
• 时间 1000：timer1 完成并delay发出 1
• 时间 1000：timer2 完成并delay发出 2
• ...

因此，因为所有 4 个值都是快速连续发出的，所以您实际上只会看到初始延迟，然后所有 4 个值都向下游发出。实际上，每个值都从最初发出时延迟了 1 秒。

如果您想“分开”这些项目，使它们至少相隔 1 秒，那么您可以执行以下操作：

const source = from([1, 2, 3, 4])
const spread = source.pipe(concatMap(value => of(value).pipe(delay(1000))));
spread.subscribe(value => console.log(value));

这会将每个单独的值转换为一个可观察的对象，在延迟后发出该值，然后连接这些可观察对象。这意味着在前一个项目的计时器完成之前，每个项目的计时器不会开始计时。