Angular6 实现按钮倒计时效果

Posted 2022-02-13 wang-zhao

在发送短信验证码的地方，为了防止用户重复点击（毕竟发送一次需要5分钱成本），往往会将按钮变灰一分钟时间，在这期间，按钮上显示倒计时。这个效果在最新的Angular6中利用内置的RxJS库非常容易实现，只要几行代码就可以实现。RxJS（响应式扩展的 javascript 版）是一个使用可观察对象进行响应式编程的库，它让组合异步代码和基于回调的代码变得更简单。RxJS 提供了一种对 Observable 类型的实现，直到 Observable 成为了 JavaScript 语言的一部分并且浏览器支持它之前，它都是必要的。
以下是控制器代码：

            import  interval  from ‘rxjs‘;
            import  take  from ‘rxjs/operators‘;

            const numbers = interval(1000);
            const takeFourNumbers = numbers.pipe(take(60));
            takeFourNumbers.subscribe(
              x => 
                this.paracont = (60-x)+"秒后可重发";
                this.disabledClick=true;
              ,
              error => ,
              () => 
                this.paracont = "重新发送验证码";
                this.disabledClick=false;
             );        

html中的按钮：

<button type="button" class="btn btn-primary px-4" 
[disabled]="disabledClick" (click)="getverifycode()">paracont</button>

　　系统创建了一个Observable的定时器对象，每一秒执行一次，这样实现的异步代码十分简洁。需要注意的是代码中的error => ,不能省略。