短信验证两种定时禁用处理机制及区别

利用bind改变this指向实现

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

    var btns = document.querySelectorAll("button")
    btns.forEach(function(btn){
        btn.onclick = function(){
            this.disabled = true
            setTimeout(function(){
                this.disabled =false
            }.bind(this),2000)
        }
    })

详细解析：此处必须要使用bind重置this指向的原因：setTimeout函数this指向为window，而此处需要它只针对于当前点击的btn生效，则需要重置它的this指向，让其指向当前点击的btn,
优点是代码简单

手机号码：< input type=“number” name="" id="">< button>发送< /button>
< script>
var btn = document.querySelector(“button”)
var time = 5;
btn.addEventListener(“click”,function(){

       var fn = function(){
        if(time != 0){
            btn.disabled =true
            btn.innerHTML = time + "秒钟后可重新发送"
            time--
        }
        else{
            clearInterval(timer)
            btn.innerHTML = "发送"
            time =5
            btn.disabled = false
        }
       } 
       fn() //因为计时器的回调方式是先执行后面等待的1000ms时间后才回调前面的函数，所以此处先将其执行一次，避免点击后出现1000ms的空挡时间
       var timer=setInterval(fn,1000)
    })
</script>

此种定时锁的代码较为复杂，适用于需要显示倒数时间的情况
思路是：在外部先定义好计时时间数，当点击后开启定时器，当数值减为0后停止定时器，并恢复到点击之前的显示内容和设定的计时时间数