JavaScript setTimeout 传递参数的正确方式与闭包陷阱

setTimeout 基础与参数传递问题

关于 setTimeout 的基础用法，可以参考 w3school 的相关文档。

然而，w3school 的示例中并未涉及带有额外参数的调用场景。

下面给出一个具体的代码示例。

 
<script type="text/javascript">
function timedMsg()
{ 
var a ="dd";
var t=setTimeout(function(){ cao(a);},3000)
} 
function cao(a)
{ 
alert(a);
} 
</script>
</head>

<input type="button" value="显示定时的警告框" onClick = "timedMsg()">

循环中变量共享导致的错误

此时遇到的问题是，如果在多个循环或多次调用中只传递参数，往往只能获取到最后一个值。

经过思考后理解了原理。

 
/* for (var i=0;i<points.length;i++){
AddGuiJi(points[i],value);
//var t=setTimeout(function(){ AddGuiJi(points[i],value);},2000*i)
} */ 

上述代码出错的原因是，当 setTimeout 触发的回调函数执行时，循环变量 i 的值已经变为 4（即 points.length 的值）。因此，尽管执行了多次操作，但每次传递的都是最后一个点的信息。

基于递归调用的解决方案

解决办法如下。

 
var timerr;
function xunhuanlian(points,value){
if(replayi<points.length){
AddGuiJi(points[replayi],value);
replayi++;
timerr=setTimeout(function(){ xunhuanlian(points,value);},1000);
} 
else{
replayi =0;
clearTimeout(timerr);
} 
/* for (var i=0;i<points.length;i++){
AddGuiJi(points[i],value);
//var t=setTimeout(function(){ AddGuiJi(points[i],value);},2000*i)
} */ 
}