• 昨天介紹的takeWhile(predict)式利用predict函示來定義條件式，一旦符合條件，就不再拿資料了。
• 今天要介紹的takeUntil跟takeWhile概念上接近，但使用上有點不同，趕緊來看看!

takeUntil

圖片來源-RxJS官網-takeUntil

• takeUntil(observable):括號內主要是一個observable，也就是彈珠圖上所稱的second observable(first observable自然是外層的source observable囉!)，當second observable被觸發開始傳送值，就結束資料傳遞，有點抽象，我們來看個例子。

case1:

• 這個例子有幾點需求:

1. 建立一個計數器: interval
2. 使用者點擊畫面後，立即觸發資料串流結束: takeWhile + fromEvent

stackblitz

import { interval, fromEvent, takeUntil, tap } from 'rxjs';

// case1: takeUntil + click event
console.log('=== case1: takeUntil + click event ===');

// second observable: click
const click$ = fromEvent(document, 'click').pipe(
  tap(() => console.log('[2nd]:clicked!'))
);

// run first observable
interval(1000)
  .pipe(takeUntil(click$)) //<-- 將second observable提供給takeUntil，一旦click發出值，立即結束
  .subscribe({
    next: console.log,
    complete: () => console.log('[1st]:completed!'),
  });

解析

• 使用takeWhile時，我們需要提供一個second observable，回想一下這句話~當點擊時，結束資料傳遞，這代表說，我需要一個偵測點擊事件，所以fromEvent(document, 'click')建立後，就能提供給takeUntil當作條件判斷式囉

• [2nd]:clicked!: 代表second observable被觸發，開始傳遞值(event資料)。
• [1st]:completed: 代表takeUntil偵測到second observable，因此結束。

✍Recap

1. takeWhile(predict_func)：宣告一個predict_func來作條件式，符合條件就取值。
2. takeUntil(2nd observable):

利用2nd observable當作takeUntil觸發的條件式。
當括號內的2nd observable開始傳遞值，takeUntil會呼叫主要的observable，也就是1st observable結束。

來到了第20天，剩下最後的1/3，不遠了~繼續加油!