angular发送验证码读秒

1、html

   <nz-form-item>
       <nz-form-control [nzErrorTip]="'personnel.codePlaceholder' | translate">
           <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
           <input type="text"  formControlName="code" nz-input [placeholder]="'personnel.code' | translate" />
       </nz-input-group>
        <ng-template #suffixButton>
             <a href="javascript:;"  nzSize="large" nz-button [disabled]="sendBtnDisabled" (click)="sendCode()">{
   
   {tips}}</a>
        </ng-template>
        </nz-form-control>
</nz-form-item>

2、js

public tips = '获取验证码';

//发送验证码
  sendCode() {
    let data = {
      mobile:this.validateForm.value["mobile"]
    }
    this.httpService.parameterPost(environment.testUrl.sendCode, data, {}).subscribe((data: any) => {
      if (data.code == 1) {
        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);
      } else {
        this.message.error(data.message)
      }
    })
  }

总结：

1、读秒逻辑：
（1）当用户点击发送验证码按钮接口请求成功时进行读秒动作，总时长为number为60秒，设置定时任务1秒触发一次，这时number--,如果number为0也就是读秒结束，更换tips内容为获取验证码并清除定时器，反之tips内容为number+’s后重新获取‘

（2）接口请求失败时直接返回错误信息

2、设置定时器

const timer = setInterval(function() {
	---
}, 1000);

3、清除定时器

clearInterval(timer);