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