利用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后停止定时器,并恢复到点击之前的显示内容和设定的计时时间数