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中的按钮：

{{paracont}}

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

转载于:https://www.cnblogs.com/wang-zhao/p/11090528.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！