angular获取手机验证码问题

来源:互联网 发布:java链表反序 编辑:程序博客网 时间:2024/05/21 09:05

.html

    <div class="weui-cell__ft">      <button class="weui-vcode-btn" [disabled]="disabled" (click)="getCode($event)">{{tips}}</button>    </div>

.component.ts

  public tips = '获取验证码';  public disabled = false;  getCode(event: any) {    let number = 60;    this.disabled = true;    const that = this;    that.tips = number + 's后重新获取';    const timer = setInterval(function () {      number --;      if (number === 0) {        that.disabled = false;        that.tips = '获取验证码';        clearInterval(timer);      } else {        that.tips = number + 's后重新获取';      }   }, 1000);  }

说一下:这里的目的是在setInterval的定时调用方法中更改属性值tips,然后通过数据绑定将倒计时数据展示到模板上。

注意这个const that = this;这里这句并不是多此一举,使用that给当前控制器设置一个别名,在setInterval里面使用that而不是this,如果直接使用this则是指代的window。

在定时完成后需要执行clearInterval()方法,暂停定时器。



原创粉丝点击