What is the difference between the RxJS operators delay, timer and interval?

Question

The behavior of delay, timer, interval operators seems to be the same in RxJS. Can anyone let me know what is the difference between those operators?

Answer 1

delay

• It's an operator.
• Delays emitted notifications from a source observable by a given time.
• Eg. of('e').pipe(delay(2000)).subscribe(...) - emit e after 2 seconds.

Demo

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/[email protected]/bundles/rxjs.umd.min.js"></script>

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

interval

• It's a function.
• Emits every given time period.
• Important: The first emission is after the time period.
• Eg. interval(2000).subscribe(...) - starting after 2 seconds, emit every 2 seconds.

Demo

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/[email protected]/bundles/rxjs.umd.min.js"></script>

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

timer

• It's a function.
• 1^st variant timer(initialDelay) - emit once after the delay and complete.
  • Eg. timer(2000).subscribe(...) - emit after 2 seconds and complete.
• 2^nd variant timer(initialDelay, period) - starting after initial delay, emit every given time period.
  • Eg. timer(0, 2000).subscribe(...) - starting immediately, emit every 2 seconds.
  • Eg. timer(2000, 2000).subscribe(...) - starting after 2 seconds, emit every 2 seconds (similar to interval(2000)).

Demo

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/[email protected]/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>