最近在写一个需求的时候,出了点小小的问题,在这做个记录。
对于定时函数setInterval()大家应该都不陌生,setInterval(callback(),time)就是说设置一个定时器,每隔time时间,
(当然这个时间是以毫秒计算的,1秒=1000毫秒)执行一次回调callback();
我刚开始这么写的代码:
function forbidden(){ var time = 60; $('.getSms').attr('disabled','disabled'); if(time>0){ var timer = setInterval(function(){ $('.getSms').text(time+'秒后重新发送'); time--; };1000); }else{ window.clearInterval(timer); $('.getSms').text('发送短信'); $('.getSms').attr('disabled',false); }
当时是这么想的,单击发送短信按钮触发forbidden(),初始化一个变量time=60,并且此时按钮不可用,然后判断:如果
time大于0,执行定时器timer(time--),等到time小于等于0的时候,清除定时器,按钮的显示文字也改变,并且变为可用,
好像一切都是这么地呵护逻辑,但是!!!点击按钮之后,看着上面的数字由60一点一点地减,减到0之后,变成了-1,-2...
瞬间懵逼了,于是就在else语句里面打一个console.log(time),然后再跑一遍,等到数据为-1的时候,控制台没打印time值,
然后意识到,这个定时函数一直在跑,time=-1的时候,并没有进行判断,于是~~~~把time的判断放到callback()里面,像这样:
function forbidden(){ var time = 60; $('.getSms').attr('disabled','disabled'); var timer = setInterval(function(){ $('.getSms').text(time+'秒后重新发送'); time--; if(time<0){ console.log(time); window.clearInterval(timer); $('.getSms').text('发送短信'); $('.getSms').attr('disabled',false); } }, 1000); }
然后,问题解决。
事后,觉得可以这么理解,定时函数是一个独立的空间,一旦开启,就一直执行(对后续代码段造成阻塞),然而我们在定时器后
面规定,time<0的时候,清除定时器,这句代码压根一直都没执行,又怎么会生效呢,放在callback()里面就不一样了,每隔1秒执行
一次callback(),每执行一次callback()就会判断了,time是不是小于0啊,不是的话待会还是要执行callback(),如果是的话,待会就
不执行这个callback()了。