setInterval(callback(),time)

最近在写一个需求的时候，出了点小小的问题，在这做个记录。

对于定时函数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()了。

setInterval(callback(),time)

猜你喜欢