• 第8天囉!咱來說說創建類的第三種:interval及timer這兩個跟時間區間有關的operator，上工!

Interval

• 圖片來源: RxJS官網- interval說明
• ✍interval(時間)定義: 數值從0開始，每固定 時間區間(毫秒ms) 累加1，並發出訊號。
• 說穿了，就是一個無窮迴圈對一個變數從0不斷累加上去，每個迴圈的執行時間都被精準控制。

case1: interval(毫秒ms)

stackblitz

import { interval, take } from 'rxjs';

// observer
const observer = {
  next: (value) => console.log('next', value),
  error: (err) => console.log('error', err),
  complete: () => console.log('complete'),
};

// case1: interval
const mSec = 1000;
const interval$ = interval(mSec);
// interval$.subscribe(observer);
// ^^^ 上面這行會造成無窮迴圈，故我們先運行下面這行，pipe(take(5))代表我只要5個訊號就好，先記住即可。
interval$.pipe(take(5)).subscribe(observer);

• 印出結果:

case1解析

• RxJS官網- interval彈珠圖
• ?從interval彈珠圖來看，就清楚的理解interval的執行程序，從0開始，每固定時間累加1，送出!

1. pipe()是observable支援的一個很重要的變數，我們在之後的章節會有更完整的說明，簡單來說，就是讓你可以指定 連續技順序的地方
2. take(5)是其中的一個技巧，代表說，你給我一堆，但我只需要 5個， 5個送出後，就不再接收interval發送的值囉!

• 印出結果

case2: interval(default=0) 一口氣印出所有的數字

stackblitz

// case2: interval(): 一口氣立即印出所有的數字
const dInterval$ = interval(0);
dInterval$.pipe(take(5)).subscribe(observer); // 1,2,3,4,5

• ?仔細觀察，5個數字是一次印出，因為我們並沒有指定時間區間，自然以default=0來進行

timer

• RxJS官網- timer

stackblitz

// case3: timer
timer(3000, 1000).pipe(take(5)).subscribe(observer);

解析

• 一開始沒印出任何東西，還以為是不是壞了，別怕，就是因為第一個參數設定3000(ms)，timer會先等待個3秒鐘，再進行固定時間累加的動作。

• 這也代表著，起始等待的時間給0，他就跟interval一樣，如下面的例子

import { timer, interval } from 'rxjs';

timer(0, 1000).subscribe(n => console.log('timer', n));
interval(1000).subscribe(n => console.log('interval', n));

進階題，用interval來驗證timer的起始等待時間

stackblitz

import { interval, timer, take, tap } from 'rxjs';

// observer
const observer1 = {
  next: (value) => console.log('[countdown]:next', value),
  error: (err) => console.log('[countdown]:error', err),
  complete: () => console.log('[countdown]:complete'),
};
const observer2 = {
  next: (value) => console.log('[timer]:next', value),
  error: (err) => console.log('[timer]:error', err),
  complete: () => console.log('[timer]:complete'),
};

// case3: timer
const takeTimes = 3;
const timeBeforeStart = 3 * 1000;
const interval$ = interval(1000).pipe(
  // tap((val) => console.log(val + 1 + 's')),
  take(takeTimes)
);

interval$.subscribe(observer1);
timer(timeBeforeStart, 1000).pipe(take(5)).subscribe(observer2);

• 印出結果

✍Recap

• 今天我們學習了創建類(creation)的:

1. interval(time_interval_ms):將數值從0不斷累加1，並依照**指定時間區間(ms)**發送累加的結果。
2. timer(time_before_start，time_interval_ms):

time_before_start: 第一個參數是等待多少時間後開始運作
time_interval_ms: 第二個參數就跟interval一樣，將數值從0不斷累加1，並依照**指定時間區間(ms)**發送累加的結果。

第8天了，堅持這樣的好習慣，淬鍊出不凡的自己，加油!