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制作倒计时效果就实现了，你，学会了吗？