用定时器做一个发送验证码的倒计时遇到的问题？

Question

当我点击那个向手机发送验证吗的按钮是（#sendsms），给那个按钮加了一个disabled属性，但是倒计时按钮还是可以点击，多次点击之后就出现问题，当curTime==0时，明明已经clearInterval(timer);了，但还是会不断进入if(curTime==0）里执行。$("#sendsms").on("click",function(){curTime=countTime;varphone=$("#form_phone").val();if(phone!=""){$("#sendsms").attr("disabled","true");$("#sendsms").text(curTime+"秒后可重新发送");timer=setInterval(handleTimer,1000);}});functionhandleTimer(){if(curTime==0){clearInterval(timer);timer=null;$("#sendsms").removeAttr("disabled");$("#sendsms").text("重新发送验证码");}else{curTime--;$("#sendsms").text(curTime+"秒后可重新发送");}}

Answer 1

请搜索一下setInterval方法，setInterval会创建一个异步线程，返回是这个线程的ID。
多次点击，会创建多个线程。timer被赋值到最后一个线程的ID，停止了的也是最后一个线程。还有其他异步线程在跑着，没有停止。
可以在handleTimer函数中打印一下timer就明白了。
解决办法：1-倒数期间，对元素解绑事件。2-单一设计模式，判断timer是否被赋值。
方法2：
varcurTime=0,
timer=null,
btn=$('#button');
btn.on('click',function(){
if(timer===null){
curTime=3;
timer=setInterval(handleTimer,1000);
}
});
functionhandleTimer(){
console.log(timer);
if(curTime===0){
clearInterval(timer);
timer=null;
btn.text('重新发送验证码');
}else{
btn.text(curTime+'秒后可重新发送');
curTime--;
}
}
看了一下其他答案，均在click中clearInterval清除计时器，这样的确可以修复问题，但是同时存在另外问题：1-多次按下btn，多次清除定时器，性能问题。2-正在倒计时的时候应该禁用掉功能函数，不应再触发重新倒计时。
//vartimer=null;
$("#sendsms").on("click",function(){
varphone=$("#form_phone").val();
if(phone!=""&&timer==null){
curTime=countTime;
$("#sendsms").attr("disabled","true");
$("#sendsms").text(curTime+"秒后可重新发送");
timer=setInterval(handleTimer,1000);
}
});
functionhandleTimer(){
if(curTime==0){
clearInterval(timer);
timer=null;
$("#sendsms").removeAttr("disabled");
$("#sendsms").text("重新发送验证码");
}
else{
curTime--;
$("#sendsms").text(curTime+"秒后可重新发送");
}
}
                            

Answer 2

1.在click事件中你的判断条件是`phone!=""`这是判断手机号是不是空吧？并不是判断是否在进行倒计时。
2.clearInterval(timer);对curTime并无影响，curTime仍旧是0，当然一直在这个条件语句中。
3.`curTime=countTime;`建议改成`varcurTime=countTime;
上面我搞错了，真是答非所问。。不知道的还是要查啊。
我跑了一下下面的代码:
varcountTime=10;
$("button").click(function(){
curTime=countTime;
varphone=$("#aaa").val();
if(phone!=""){
$("button").attr("disabled","true");
$("button").text(curTime+"秒后可重新发送");
timer=setInterval(handleTimer,1000);
}
})
});
functionhandleTimer(){
console.log(timer);
if(curTime==0){
clearInterval(timer);
timer=null;
$("button").removeAttr("disabled");
$("button").text("重新发送验证码");
}
else{
curTime--;
$("button").text(curTime+"秒后可重新发送");
}
}
Submit
是可以的啊，所以我也不知道是什么情况了，建议楼主调试一下或者用console.log()吧，再有问题再贴出来==