今天遇见一个很棘手的问题,在页面上要使用计时器来控制地图上点和线的绘制,如果单纯的只绘制一条线,那么可以使用一个计时器解决问题,但是问题是我们的线是从数据库取出来的,并且要同时在页面上使用计时器绘制,达到的效果就是同时在绘制线!!
但是动态的创建计时器该怎么办呢?
一开始做了个示例代码,如下:
var objList = [{length:1},{length:2},{length:4}];
var countList = [0,0,0];
for(var i=0;i<objList.length;i++){
objList[i].timer = setInterval(function(){
if(objList[i].length==countList[i]){
clearInterval(objList[i].timer);
}else{
alert(i);
}
countList[i]++
},1000);
}
结果一直报错,找出原因,每个计时器都是单独的,他们调用的代码也是当前设置的,如上,其调用的代码就是
function(){
if(objList[i].length==countList[i]){
clearInterval(objList[i].timer);
}else{
alert(i);
}
countList[i]++
}
这个时候变量i就相当于没有定义,就会报错,也就是说计时器中的代码不能出现局部变量的代码!!!!
晕死!难道要我一个一个的去写计时器?这不是写死人了?
最后想到在循环数据List的时候主要就是变量i在作怪,如果我能让每个计时器都有一个固定的i,那么问题不就解决了!!!
好了,问题迎刃而解,解决的代码如下:
var objList = [{length:1},{length:2},{length:4}];
var countList = [0,0,0];
var str = "";
for(var i=0;i<objList.length;i++){
str += "objList["+i+"].timer = setInterval(function(){"
str += "if(objList["+i+"].length==countList["+i+"]){";
str += "clearInterval(objList["+i+"].timer);";
str += "}else{";
str += "alert("+i+");";
str += "}"
str += "countList["+i+"]++";
str += "},1000);";
}
eval(str);
这段代码相当于在页面上写了很多定时器的代码,并且运行,OK!