Rxjs之interval、take制作倒計時效果

擷取驗證碼按鈕，一個耳熟能詳的常見功能…

之前一直是使用JS來實作的，那麼最近接觸了Rxjs,就跟着文檔來實作一個簡單的倒計時功能吧

話不多說，直接上代碼了…

首先準備工作做好。

引入所需的rxjs的方法、定義變量

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
buttonText = '擷取驗證碼';
isDisabled = false;  // 按鈕是否灰顯
seconds = 60;  // 倒計時開始時間
           

然後嘞，是時候讓RXJS展示真正的技術了！

countDown() {
    interval(1000)
      .pipe(take(this.seconds + 1))   // 注意哦，這裡是做 +1 的操作
      .subscribe({
        next: (value: number) => {
          this.isDisabled = true;
          this.buttonText = `重新擷取(${this.seconds - value}s)`;
        },
        error: null,
        complete: () => {
          this.buttonText = '重新擷取';
          this.isDisabled = false;
        }
    });
}
           

然後我們接下來去調用就可以啦，順便附帶上html的代碼片段

<button
  [ngClass]="className"
  [disabled]="isDisabled"
  (click)="btnClick()"
  class="countDown"
>
  {{ buttonText }}
</button>
           

諾，我這是在angular中使用的，是以标簽button裡邊的屬性和屬性值就是上述的寫法。

當然如果你是原生或者Vue或者React寫法，自行轉化哦，萬變不離其中…

順便給出好奇的小寶貝們，對于上述button标簽中angular的用法之ngClass，的代碼片段，如果你沒使用過angular,那麼也做了解喽

get className(): object {
    return {
      'disabled': this.isDisabled,  // 類名 disabled 的有無被變量 isDisabled 的狀态決定
    };
}
           

至此~~Rxjs制作倒計時效果就實作了，你，學會了嗎？