菜雞們一起征服RxJS -day32: 進一步驗證startWith 位置擺放的重要性

2022 iThome 鐵人賽

自我挑戰組

菜雞也能優雅的征服RxJS系列第 32 篇

14th鐵人賽 rxjs

小偉哥

2022-10-07 11:06:24

1415 瀏覽

分享至

我們在昨天day31有介紹到startWith及endWith的用法，也建議大家將startWith放置於pipe底下，避免不可預期的情形發生。
今天我們來寫一個範例，並進一步驗證startWith擺在不同地方會發生什麼情形!

case: 模擬一個start & stop的計時器，並顯示訊息

我們在上個例子說明了startWith及endWith擺放順序的重要性，我們來寫個例子

需求:

一個起始按鈕: start
一個停止按鈕: stop
一個顯示數字倒數

這裡我們定義一個變數countDownMaxNum，來提供scan的初始值及startWith使用。

可參考day12-scan複習如何寫一個倒數計時器。

一個狀態顯示: start(綠色)/stop(紅色)

stackblitz

html

...
<body>
  <button id="start">start</button>
  <button id="stop">stop</button>
  <h1 id="number">-</h1>
 </body>
 ...

javascript

import {
  endWith,
  from,
  fromEvent,
  interval,
  map,
  startWith,
  scan,
  takeUntil,
  takeWhile,
  switchMap,
  tap,
  throwError,
} from 'rxjs';

//elems
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const num = document.getElementById('number');

// RxJS
const start$ = fromEvent(start, 'click');
const stop$ = fromEvent(stop, 'click');
const timer$ = interval(1000);

// === Step1: 建置一個倒數計時器，並宣告一個變數countDownMaxNum提供給scan及startWith使用 ===
const countDownMaxNum = 10;
const countDown$ = timer$.pipe(
  map(() => -1),
  scan((accu, current) => accu + current, countDownMaxNum),
  takeWhile((d) => d > 0),
  takeUntil(stop$)
);

// === Step2: 設定click to start，並觀察不同位置的startWith有什麼不同 ===
console.log('=== startWith放在pipe的底部 ===');
const clickStart$ = start$
  .pipe(
    // 觀察看看startWith放位置(1)及(2)有什麼不同
    // startWith(countDownMaxNum), //<-- (1)
    switchMap(() => countDown$),
    startWith(countDownMaxNum) //<--(2)　現在測試這個位置
  )
  .subscribe((d) => (num.innerHTML = `${d}`));

解析1: 先來看看startWith放在(2)的位置

使用者尚未開始點擊時，startWith就先拋出初始值countDownMaxNum，提供顯示在num.innerHTML之中，所以從頁面可以看到初始值是10。
使用者點擊start，開始倒數，中途按下stop，數字靜止。
此時，如果使用者接續按start，數字從9開始，而不是我們預期的10??

原因是，

startWith在observable開始之前，會優先發送一個數值給observer.next()，因此我們可以如期在頁面初始狀態上，看到10這個數字。
在那之後，startWith就不會再發送，也因此，當你再度按下start，數字會直接從9開始，也就是直接跑scan送出的值。

解析2: 將startWith放在(1)的位置看看發生什麼事

stackblitz

...
console.log('=== startWith放在pipe的 "最上層" ===');
const clickStart$ = start$
  .pipe(
    // 觀察看看startWith放位置(1)及(2)有什麼不同
    startWith(countDownMaxNum), //<-- (1)  現在測試這個位置
    switchMap(() => countDown$)
    // startWith(countDownMaxNum) //<--(2)
  )
  .subscribe((d) => (num.innerHTML = `${d}`));