利用List动态创建多个计时器

今天遇见一个很棘手的问题，在页面上要使用计时器来控制地图上点和线的绘制，如果单纯的只绘制一条线，那么可以使用一个计时器解决问题，但是问题是我们的线是从数据库取出来的，并且要同时在页面上使用计时器绘制，达到的效果就是同时在绘制线！！

但是动态的创建计时器该怎么办呢？

一开始做了个示例代码，如下：

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！