javascript使用setTimeout实现每隔一段时间输出1~9的数字
0
悬赏园豆：30
[已解决问题]
解决于 2014-04-29 19:45
window.onload = function() { var i = 0; for(var j = 0;j < 10;j++) { setTimeout(console.log(i),10000*i); i++; } };
以上代码期望在控制台输出1~9的数字，并且希望每隔一段时间输出一个数字，而不是在控制台一口气输出。但是以上代码是错误的，并不能保证每隔一段时间输出，而是同一时间输出。请问为什么？谢谢答复
最佳答案
0
setTimeout的作用是将指定的代码段在指定的时间中加入执行队列。
简单的做法是使用setInterval。
你的代码等价于：
window.onload = function() { var i = 0; for(var j = 0;j < 10;j++) { setTimeout(new Function(console.log(i)),10000*i); i++; } };
所以就直接执行完了。
正确的写法是：
window.onload = function() { var i = 0; for(var j = 0;j < 10;j++) { setTimeout(function(){console.log(i);i++;},10000*j); } };
收获园豆：20
谢谢指教，自己也在《高性能Javascript》书籍中找到说法。资料收集中都觉得setTimeout都可以成一篇文章了^_^。不过对于“setTimeout的作用是将指定的代码段在指定的时间中加入执行队列”等说法虽然可以解释现象，不过本人还是不知道怎么才能找到更有力的证据，或者说可以真的看到那个队列吗？
@Iwillknow: 这个更有力的证据...我不知道。这个队列我是没看到过了。《JavaScript高级编程》还没看完，看完了看能不能回答这个问题...
其他回答(5)
0
setInterval(function(){ print your text },3000);
首先谢谢你的回答~其实setInterval的实现我已经完成了，以下是完整代码。我只是对setTimeout的相同功能实现比较好奇。而且重点是我没有彻底弄明白，为什么我之前那样写setTimeout看不到延迟效果。
window.onload = function() { var i = 0; var bar = setInterval(test,1000); function test() { console.log(i); i++; if(i == 10) { clearInterval(bar); } } };
@Iwillknow: 要实现连接的定时，需要递归调用setTimeout
0
我试了一下。这个应该是for循环的原因，循环了就输出了。而setTimeout根本没起作用。
0
使用setTimeout本身是没有任何问题，通过时间间隔，同样可以实现。但，第一个参数需要注意，需要使用function代替，而不是直接把代码写在里面。setTimeout(function(){console.log(i)},10000*i);，大概浏览器需要解析吧。第二种方式，使用字符串代替函数体，setTimeout("console.log(1)",10000*i);。可以实现同样的效果。
收获园豆：10
0
典型的闭包问题，你测试下i看看，i是同一数字。然后如果是闭包问题，就是google闭包吧
确切地讲是闭包问题的延伸版。这里考虑已经不是单纯的闭包问题了，而是setTimeout
@Iwillknow: 那你总结了吗，打算怎么结贴？
0
var i=0; var max=9; function incrementNum(){ i++; console.log(i); if(i<max){ setTimeout(incrementNum,1000*i); }else{ clearTimeout(incrementNum); } } incrementNum();
第一次打印，会直接出1和undefined，还不晓得这个undefined是怎么来的
不好意思，我在chrome和FF下测试，输出结果都是1~9，完全不符预期。代码是这样子的（简化版）
<!doctype html>
<html>
<head>
<script>
window.onload = function() {
var i=0;
var max=9;
function incrementNum(){
i++;
console.log(i);
if(i<max){
setTimeout(incrementNum,1000*i);
}else{
clearTimeout(incrementNum);
}
}
incrementNum();
}
</script>
<head>
<body>
</body>
<html>
能具体说下你那边的实际情况吗？^_^
@Iwillknow:
我是直接在firebug上面输出的，有你要求的时间间隔输出效果哈
第一次的时候，输出1，接着立马就是一个undefined。
@Canrz: 不好意思，没有找到原因。根据检测只是知道，这个undefined是firebug抛出的一个警告，并不是其它原因（如setTimeout）造成的，因为即使运行如下代码也是会有undefined输出，再过分一点只有“var a = 0;”的字样也是会有undefined的输出。~应该是firebug的原因，学术浅薄具体不详>_<，抱歉。
function test() { console.log("1"); } test();
@Iwillknow:额 ，如果去掉test()，单独跑
function test() { console.log("1"); }
就会输出一个undefined。
你前面说的“在chrome和FF下测试，输出结果都是1~9，完全不符预期”是什么情况，我firebug和浏览器单开都是隔段时间输出一个数字
@Canrz: 不好意思，是完全符合预期，是能间隔一段时间输出一个数字的。~是undefined的输出不符合
@Iwillknow:哦，了解了，明天再查查问问，看有没有大神解惑
