利用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！