js实现一个简单的60秒倒计时

前言

在日常开发中我们经常遇到登录发送验证码或者短信的业务，为了缓解服务器的压力，通常会设置每一分钟只能发送一次，前端如何实现这个功能呢？

准备工作

在开始之前，我们先来了解一下：

setTimeout是指定时间后执行一次 setInterval是每隔一段时间执行一次

对于我们的业务需求，我们的第一选择就是使用setInterval，让它每隔一秒执行一次，这样就实现了倒计时的效果，具体了流程如下：

var button  = document.querySelector('button');
let second = 60
button.onclick = function(){
   alert("验证码已经发送到您的手机,注意查收")
   _this = this
   let second = 60
   var time = setInterval(function(){
       second--
       if(second>0){
           _this.innerText = `${second}S后再次发送`
           _this.disabled = true
       }else{
           second = 60
           _this.innerText = '点击发送验证码'
           _this.disabled = false
           clearInterval(time)
       }
   },1000)
}     

有没有想过setTimeout可不可以实现这样的一个功能呢？

答案是肯定的 让我们一起看看吧

我们知道setTimeout是再执行时间过后执行一次，那我们可以想方设法让他进行多次执行就可以，对于一分钟的倒计时，如果每一秒钟执行一次，我们让其执行六十次也是可以完成的 定义一个函数，设置递归出口条件，``每隔一分钟递归调用一次

var button  = document.querySelector('button');
let second = 60
// start函数中调用了setTimeout，会在1000ms后递归调用start，实现周期性定时器
       
button.onclick=function(){
    alert("验证码已经发送到您的手机,注意查收")
    _this = this
            
    const start = () => setTimeout(() => {
    // 终止条件，最多调用60次
        if(second--<0) {      
            _this.innerText = '点击发送验证码'
            _this.disabled = fasle
            return
        }       
        // 递归调用
        // console.log(second)
        _this.innerText=`${second}S后再次发送`
        _this.disabled = true
       start()
    }, 1000)
    start()//第一次在外层函数调用start函数
}

总结

以上两种方法都是可以实现这个倒计时业务的，但是我们在考虑性能的时候，第一种性能肯定是比递归性能要好一些的