美文网首页Angular.js专场前端开发笔记
Angular6实现按钮倒计时效果

Angular6实现按钮倒计时效果

作者: 禅大师 | 来源:发表于2019-01-02 00:57 被阅读3次

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

    相关文章

      网友评论

        本文标题:Angular6实现按钮倒计时效果

        本文链接:https://www.haomeiwen.com/subject/hmkalqtx.html