在循环中使用setTimeout

  首先，我想说下闭包.何为闭包,闭包是指内层的函数可以引用存在于包围它的函数内的变量,即使外层函数执行已经终止.
  其次是JS的线程问题,JS是单线程的,意味着同一时间只能执行一条语句,所以每个JS执行代码块都会阻塞异步事件的执行,这就意味着当一个异步(鼠标点击事件,AJAX,SETTIMEOUT)发生的时候,他们将排在执行队列的最后等待执行.
  最后说下setTimeout，setTimeout有2种形式：
     setTimeout(code,interval)
    setTimeout(func,interval,args)
其中code是一个字符串，这里会用到EVAL()将字符串转换成JS代码执行
func是一个函数
注意"函数"的意义,是一个表达式,而不是一个语句(执行函数)
比如你想周期性的执行一个函数

function aa() {
   //todo something
}
setTimeout("aa()",1000);
或setTimeout(a,1000);

注意第二种写法不能写成a()

在循环中使用setTimeout:

function testAnonymous() {
   var aa = 0;
   var bb = 1;
   for(var i = 0; i < 10; i++) {
      aa++;
      bb++;
      setTimeout("testDisplay(" + aa + "," + bb + ")",1000);
      //setTimeout(function(){return testDisplay(aa,bb);},1000);
    }
}
			
function testDisplay(aa,bb) {
  alert("this is aa = " + aa + " and bb = " + bb);
}

在循环中用字符串拼接的形式可以成功的执行，但是用闭包就会出现每次ALERT出来的结果都是一样的.这是为什么呢?回到刚才说的setTimeout的机制,用字符串拼接的方式每次排队等待的函数里的参数都得到了正确的初始化,而匿名函数里在进入等待队列的时候还没有执行,以至于函数体里的函数参数并没有被初始化,等到FOR循环结束,再执行匿名函数的时候aa和bb的值已经是最后一次的值了,所以不管怎么ALERT都是一样的结果.

字符串拼接的代码是比较丑陋,但是某些时候也没有其他办法可以解决,如果不在循环中,完全可以用闭包的形式来替代字符串拼接,这样能够更好的组织代码,使代码看上去更直观.

评论

2 楼 yeak2001 2009-11-19  

不好意思啊，我最近比较忙，一直没上来看看
你的问题其实是这样的
在循环中你使用了setTimeout但是设置的间隔时间是100ms
JS是单线程的，他不会立刻执行，因为在这个setTimeout方法执行的时候FOR循环还在执行，所以他必须得在FOR循环完以后再会执行，也就是排入了等待队列，然后呢，你每次都是在100MS以后执行，这个100MS不是个累加的100MS，也就是永远都是100MS，所以等FOR循环执行完以后的100MS就会一次性执行draw 365次,修改办法是setTimeout("draw(" + i + ")", 100*i),时他们每次执行的时间有间隔就可以了

1 楼 FinrodElensar 2009-10-16  

<script>
//我想可以直观的看到用点画圆的效果，用setTimeout()方法
function draw(i)
{
    var ele=document.createElement("<div>");
    var a=300-100*Math.sin(i);//(300,100)为圆心的坐标left:300px;top:300px; 半径       //为：100
    var b=300-100*Math.cos(i);
    a=a.toString();
    b=b.toString();
    ele.style.position="absolute";
    ele.style.left=a;
    ele.style.top=b;
    ele.innerText=".";
    document.body.insertBefore(ele)'
}
</script>
<script>
for(i=0;i<360;i++)
{
   setTimeout("draw("+i+")",100);
}
//本来想隔100ms画一个点的，结果是100ms后就把整个圆画成了...,大大能解释是什么原因吗，先谢谢了.
</script>