这几天写项目,需要用到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了之后尽管计时器名是一模一样的
但也不是同一个定时器了吧…
记录一下这个坑了我半天的辣鸡定时器..
2 Comments
牛逼啊大佬!写的真屌!我都哭了
@KIENG 基本的