[记录]关于JavaScript定时器的坑

这几天写项目,需要用到Ajax定时获取后台最新数据
然后无可奈何就用到了JavaScript定时器这个坑人的东西
因为需要获取的数据条数比较多
所以定义了n个定时器
搞完了之后,还需要搞个点击对应按钮获取对应区域数据的功能
然后在按钮单机事件中清空了原有定时器,又重新定义了定时器重新传值
大概变成了这样

var timerone = window.setInterval(function(){
   //Ajax code
}, 20000);
var timertwo = window.setInterval(function(){
   //Ajax code
}, 20000);
var timerthree = window.setInterval(function(){
   //Ajax code
}, 20000);
var timerfour = window.setInterval(function(){
   //Ajax code
}, 20000);

$('#btn').click(function(){
   window.clearInterval(timerone);
   window.clearInterval(timertwo);
   window.clearInterval(timerthree);
   window.clearInterval(timerfour);
   var timerone = window.setInterval(function(){
      //Ajax code
   }, 20000);
   var timertwo = window.setInterval(function(){
      //Ajax code
   }, 20000);
   var timerthree = window.setInterval(function(){
      //Ajax code
   }, 20000);
   var timerfour = window.setInterval(function(){
      //Ajax code
   }, 20000);
});

搞完之后发现
我按这个逻辑明明应该是打开页面的时候每隔20s发送4次请求
单击按钮之后也是每20s发送4次
但实际的情况确是 单击按钮之后每个定时器都发送了3~4次请求
搞了半天也没搞懂是什么情况

后来这样写就好了

var timerone;
var timertwo;
var timerthree;
var timerfour;

timerone = window.setInterval(function(){
   //Ajax code
}, 20000);
timertwo = window.setInterval(function(){
   //Ajax code
}, 20000);
timerthree = window.setInterval(function(){
   //Ajax code
}, 20000);
timerfour = window.setInterval(function(){
   //Ajax code
}, 20000);

$('#btn').click(function(){
   window.clearInterval(timerone);
   window.clearInterval(timertwo);
   window.clearInterval(timerthree);
   window.clearInterval(timerfour);
   timerone = window.setInterval(function(){
      //Ajax code
   }, 20000);
   timertwo = window.setInterval(function(){
      //Ajax code
   }, 20000);
   timerthree = window.setInterval(function(){
      //Ajax code
   }, 20000);
   timerfour = window.setInterval(function(){
      //Ajax code
   }, 20000);
});

我也不清楚到底为什么这样写就好了 但总归是好使了…
可能是重新var了之后尽管计时器名是一模一样的
但也不是同一个定时器了吧…
记录一下这个坑了我半天的辣鸡定时器..

风影OvO

风影OvO, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权 | 转载请注明原文链接

2 Comments

  • 牛逼啊大佬!写的真屌!我都哭了

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐