Angular6 实现按钮倒计时效果

在发送短信验证码的地方,为了防止用户重复点击(毕竟发送一次需要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 => {},不能省略。

posted @ 2019-06-26 16:13  刀神归来  阅读(1028)  评论(0编辑  收藏  举报