RxJS 运算符延迟、计时器和间隔之间有什么区别？

Question

延迟、计时器、间隔运算符的行为在 RxJS 中似乎是相同的。谁能告诉我这些运算符之间有什么区别？

Answer 1

delay

• 这是一个运营商。
• 将可观察源发出的通知延迟给定时间。
• 例如。of('e').pipe(delay(2000)).subscribe(...)- e2 秒后发射。

演示

var { of } = rxjs;
var { tap, delay } = rxjs.operators;

var displayBox = document.getElementById('display');

of('e').pipe(
  tap(_ => displayBox.innerHTML = 'Source observable emitted.'),
  delay(2000)
).subscribe(
  _ => displayBox.innerHTML += '<br />Received emission in subscription.',
  null,
  () => displayBox.innerHTML += '<br />Observable complete.'
);

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>

<p id="display"></p>

interval

• 这是一个函数。
• 每个给定时间段发出。
• 重要提示：第​​一次发射是在该时间段之后。
• 例如。interval(2000).subscribe(...)- 2秒后开始，每2秒发射一次。

演示

var { interval } = rxjs;

var displayBox = document.getElementById('display');

interval(2000).subscribe(  // won't complete
  value => displayBox.innerHTML += '<br />Received emission in subscription: ' + value
);

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>

<p id="display"></p>

timer

• 这是一个函数。
• 第^一个变体timer(initialDelay)- 在延迟后发出一次并完成。
  • 例如。timer(2000).subscribe(...)- 2秒后发出并完成。
• 第二种变体^-timer(initialDelay, period)在初始延迟后开始，每个给定时间段发出。
  • 例如。timer(0, 2000).subscribe(...)- 立即启动，每 2 秒发射一次。
  • 例如。timer(2000, 2000).subscribe(...)- 2 秒后开始，每 2 秒发射一次（类似于interval(2000)）。

演示

var { timer } = rxjs;

var timerNoDelayBox = document.getElementById('timerNoDelay');
var timerDelayBox = document.getElementById('timerDelay');

// w/o initial delay
timer(0, 2000).subscribe(  // won't complete
  value => timerNoDelayBox.innerHTML += '<br />Received emission in subscription: ' + value
);

// w/ initial delay
timer(2000, 2000).subscribe(  // won't complete
  value => timerDelayBox.innerHTML += '<br />Received emission in subscription: ' + value
);

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  width: 50%;
}

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>

<table>
  <tr>
    <th>Timer w/o initial delay</th>
    <th>Timer w/ initial delay</th>
  </tr>
  <tr>
    <td>
      <p id="timerNoDelay"></p>
    </td>
    <td>
      <p id="timerDelay"></p>
    </td>
  </tr>
</table>

Answer 2

以下图片取自https://rxmarbles.com，这是我在使用 RxJS 时强烈推荐的网站：

延迟

延迟来自 Observable 源（顶行）的项目发射。

计时器

创建一个 Observable，它在给定时间后开始发射，并在此后的每个时间段后发射越来越多的数字。这里没有可观察的源/输入。

间隔

创建一个 Observable，它在每个指定的时间间隔发出连续的数字。这里也没有源/输入 Observable。