c478e6208b7971f94532377d4e7e25d7e72c3c5eba530532ecebeeff1b31d45c381f40bcd1ffa198af8aec726728278aa3f7b2ec96e9a3d52e46ca19754d82 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /** @prettier */
  2. import { MonoTypeOperatorFunction, SchedulerLike } from '../types';
  3. import { executeSchedule } from '../util/executeSchedule';
  4. import { operate } from '../util/lift';
  5. import { createOperatorSubscriber } from './OperatorSubscriber';
  6. /**
  7. * Re-emits all notifications from source Observable with specified scheduler.
  8. *
  9. * <span class="informal">Ensure a specific scheduler is used, from outside of an Observable.</span>
  10. *
  11. * `observeOn` is an operator that accepts a scheduler as a first parameter, which will be used to reschedule
  12. * notifications emitted by the source Observable. It might be useful, if you do not have control over
  13. * internal scheduler of a given Observable, but want to control when its values are emitted nevertheless.
  14. *
  15. * Returned Observable emits the same notifications (nexted values, complete and error events) as the source Observable,
  16. * but rescheduled with provided scheduler. Note that this doesn't mean that source Observables internal
  17. * scheduler will be replaced in any way. Original scheduler still will be used, but when the source Observable emits
  18. * notification, it will be immediately scheduled again - this time with scheduler passed to `observeOn`.
  19. * An anti-pattern would be calling `observeOn` on Observable that emits lots of values synchronously, to split
  20. * that emissions into asynchronous chunks. For this to happen, scheduler would have to be passed into the source
  21. * Observable directly (usually into the operator that creates it). `observeOn` simply delays notifications a
  22. * little bit more, to ensure that they are emitted at expected moments.
  23. *
  24. * As a matter of fact, `observeOn` accepts second parameter, which specifies in milliseconds with what delay notifications
  25. * will be emitted. The main difference between {@link delay} operator and `observeOn` is that `observeOn`
  26. * will delay all notifications - including error notifications - while `delay` will pass through error
  27. * from source Observable immediately when it is emitted. In general it is highly recommended to use `delay` operator
  28. * for any kind of delaying of values in the stream, while using `observeOn` to specify which scheduler should be used
  29. * for notification emissions in general.
  30. *
  31. * ## Example
  32. *
  33. * Ensure values in subscribe are called just before browser repaint
  34. *
  35. * ```ts
  36. * import { interval, observeOn, animationFrameScheduler } from 'rxjs';
  37. *
  38. * const someDiv = document.createElement('div');
  39. * someDiv.style.cssText = 'width: 200px;background: #09c';
  40. * document.body.appendChild(someDiv);
  41. * const intervals = interval(10); // Intervals are scheduled
  42. * // with async scheduler by default...
  43. * intervals.pipe(
  44. * observeOn(animationFrameScheduler) // ...but we will observe on animationFrame
  45. * ) // scheduler to ensure smooth animation.
  46. * .subscribe(val => {
  47. * someDiv.style.height = val + 'px';
  48. * });
  49. * ```
  50. *
  51. * @see {@link delay}
  52. *
  53. * @param scheduler Scheduler that will be used to reschedule notifications from source Observable.
  54. * @param delay Number of milliseconds that states with what delay every notification should be rescheduled.
  55. * @return A function that returns an Observable that emits the same
  56. * notifications as the source Observable, but with provided scheduler.
  57. */
  58. export function observeOn<T>(scheduler: SchedulerLike, delay = 0): MonoTypeOperatorFunction<T> {
  59. return operate((source, subscriber) => {
  60. source.subscribe(
  61. createOperatorSubscriber(
  62. subscriber,
  63. (value) => executeSchedule(subscriber, scheduler, () => subscriber.next(value), delay),
  64. () => executeSchedule(subscriber, scheduler, () => subscriber.complete(), delay),
  65. (err) => executeSchedule(subscriber, scheduler, () => subscriber.error(err), delay)
  66. )
  67. );
  68. });
  69. }