[譯] RxJS 排程器入門

SangKa發表於2017-10-16
JS

原文連結: staltz.com/primer-on-r…
本文為 RxJS 中文社群 翻譯文章，如需轉載，請註明出處，謝謝合作！
如果你也想和我們一起，翻譯更多優質的 RxJS 文章以奉獻給大家，請點選【這裡】

RxJS 中的排程器 ( Schedulers ) 是用來控制事件發出的順序和速度的(傳送給觀察者的)。它還可以控制訂閱 ( Subscriptions ) 的順序。為了不搞得太理論化，先考慮下這個示例:

const a$ = Rx.Observable.of(1, 2);
const b$ = Rx.Observable.of(10);

const c$ = Rx.Observable.combineLatest(a$, b$, (a, b) => a + b);

c$.subscribe(c => console.log(c));複製程式碼

你覺得控制檯輸出的結果是什麼呢？大多數人會猜是:

11
12複製程式碼

因為首先 a$ 中1會和 b$ 中的10配對，然後 a$ 中的2和 b$ 中的10配對。

事實上，出現在控制檯中的是:

12複製程式碼

1 + 10 的組合並沒有發生。原因是 Observables a$ 和 b$ 都是“同步的”，它們會盡可能快地執行。那麼事件發出的順序到底是怎樣的呢？答案是不確定的，它可能是以下任意一種:

  • 1, 2, 10
  • 1, 10, 2
  • 10, 1, 2

在這種順序不確定的情況下，我們應該描述出事件的發出順序是怎樣的。這就是排程器所做的事。預設情況下，RxJS 使用所謂的遞迴排程器。下面是它的工作原理:

  1. c$ 被訂閱
  2. combineLatest 的第一個輸入流 a$ 被訂閱
  3. a$ 發出值 1
  4. combineLatest 將 1 作為 a$ 的最新值進行儲存
  5. a$ 發出值 2
  6. combineLatest 將 2 作為 a$ 的最新值進行儲存
  7. combineLatest 的第二個輸入流 b$ 被訂閱
  8. b$ 發出值 10
  9. combineLatest 將 10 作為 b$ 的最新值進行儲存
  10. combineLatest 現在同時擁有了 a$ 和 b$ 的值，因此它發出值 2 + 10

發出的順序為 1, 2, 10 。最有意思的是在 b$ 被訂閱前， 將 a$ 的所有事件都儘快地發出了。RxJS 使用這種排程器作為預設排程器出於兩點原因:

  • 使用此策略效能的整體表現更好
  • 在除錯工具中更易於進行堆疊跟蹤

然而，可以通過使用不同的排程器來自定義事件發出的順序及速度。我們在 a$ 上使用 asap 排程器來讓其“慢下來”:

// const a$ = Rx.Observable.of(1, 2);
const a$ = Rx.Observable.from([1, 2], Rx.Scheduler.asap); // 新程式碼
const b$ = Rx.Observable.of(10);

const c$ = Rx.Observable.combineLatest(a$, b$, (a, b) => a + b);

c$.subscribe(c => console.log(c))複製程式碼

from 操作符的第二個引數是排程器，用來自定義事件的發出。asap 排程器使用 setImmediate 來安排任務儘快執行，但不是同步的。程式碼改變後，控制檯會輸出:

11
12複製程式碼

因為內部執行順序如下:

  1. c$ 被訂閱
  2. combineLatest 的第一個輸入流 a$ 被訂閱
  3. combineLatest 的第二個輸入流 b$ 被訂閱
  4. b$ 發出值 10
  5. combineLatest 將 10 作為 b$ 的最新值進行儲存
  6. a$ 發出值 1
  7. combineLatest 將 1 作為 a$ 的最新值進行儲存
  8. combineLatest 現在同時擁有了 a$ 和 b$ 的值，因此它發出值 1 + 10
  9. a$ 發出值 2
  10. combineLatest 將 2 作為 a$ 的最新值進行儲存
  11. combineLatest 發出值 2 + 10

發出的順序為 10, 1, 2 。為了得到另外一種發出順序，可以為 b$ 也自定義排程器:

const a$ = Rx.Observable.from([1, 2], Rx.Scheduler.asap);
// const b$ = Rx.Observable.of(10);
const b$ = Rx.Observable.from([10], Rx.Scheduler.asap); // 新程式碼

const c$ = Rx.Observable.combineLatest(a$, b$, (a, b) => a + b);

c$.subscribe(c => console.log(c));複製程式碼

現在發出的順序為 1, 10, 2，因為執行順序如下:

  1. c$ 被訂閱
  2. combineLatest 的第一個輸入流 a$ 被訂閱
  3. combineLatest 的第二個輸入流 b$ 被訂閱
  4. a$ 發出值 1
  5. combineLatest 將 1 作為 a$ 的最新值進行儲存
  6. b$ 發出值 10
  7. combineLatest 將 10 作為 b$ 的最新值進行儲存
  8. combineLatest 現在同時擁有了 a$ 和 b$ 的值，因此它發出值 1 + 10
  9. a$ 發出值 2
  10. combineLatest 將 2 作為 a$ 的最新值進行儲存
  11. combineLatest 發出值 2 + 10

排程器還可以讓事件的發出變得更快，同時保持發出的順序不變。例如，RxJS 的 TestScheduler 可以使 Observable.interval(1000).take(10) 被訂閱時進行同步執行，而不需要花費10秒鐘來完成:

Rx.Observable.interval(1000, new Rx.TestScheduler()).take(10)複製程式碼

TestScheduler 是在 RxJS 內部使用的 (參見 filter 的測試用例)，它使得成百上千個時間相關的測試程式碼飛快地執行，但有一些像 Rx Sandbox 這樣的工具和積極的討論來豐富此排程器的使用場景，使得在 RxJS 內部之外的地方也可以使用。

如果你也喜歡本文，可以考慮將此推文分享給你的關注者。

相關文章