定制自己的定时器

前端定时器

问题

实现获取验证码按钮倒计时显示

解决

利用 setInterval 方法每个一秒执行一次

实现

//计时器
countDown(number) {
    //定时器
    if (timer) {
        clearInterval(timer);
    }
    //设置按钮的封装方法
    this.setCodeStatus(true, false,"获取验证码");
    let num = number;
    let timer = setInterval(() => {
        num--;
        if (num === 0) {
            clearInterval(timer);
            this.setCodeStatus(false, false, "重新发送");
        }else {
            this.sendCode.sendCodeText = `倒计时${num}秒`;
        }
    }, 1000)
}

setInterval 赋予timer 然后进行清理 clearInterval(timer)

扩展

setInterval 与 setTimeout 比较

• setTimeout 和setInterval 经常被用来处理延时和定时任务。setTimeout 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval 则可以在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
• setTimeout 只执行一次，而setInterval 可以多次调用。