首页 新闻 赞助 找找看

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的数字,并且希望每隔一段时间输出一个数字,而不是在控制台一口气输出。但是以上代码是错误的,并不能保证每隔一段时间输出,而是同一时间输出。请问为什么?谢谢答复

gyy_Jade的主页 gyy_Jade | 初学一级 | 园豆:111
提问于:2014-04-27 20:19
< >
分享
最佳答案
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
幻天芒 | 高人七级 |园豆:37175 | 2014-04-28 20:36

谢谢指教,自己也在《高性能Javascript》书籍中找到说法。资料收集中都觉得setTimeout都可以成一篇文章了^_^。不过对于“setTimeout的作用是将指定的代码段在指定的时间中加入执行队列”等说法虽然可以解释现象,不过本人还是不知道怎么才能找到更有力的证据,或者说可以真的看到那个队列吗?

gyy_Jade | 园豆:111 (初学一级) | 2014-04-29 18:35

@Iwillknow: 这个更有力的证据...我不知道。这个队列我是没看到过了。《JavaScript高级编程》还没看完,看完了看能不能回答这个问题...

幻天芒 | 园豆:37175 (高人七级) | 2014-04-29 23:02
其他回答(5)
0

setInterval(function(){ print your text },3000);

空明流光 | 园豆:106 (初学一级) | 2014-04-27 21:07

首先谢谢你的回答~其实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);
                    }
                }
            };

 

支持(0) 反对(0) gyy_Jade | 园豆:111 (初学一级) | 2014-04-27 21:11

@Iwillknow: 要实现连接的定时,需要递归调用setTimeout

支持(0) 反对(0) 空明流光 | 园豆:106 (初学一级) | 2014-04-28 16:30
0

我试了一下。这个应该是for循环的原因,循环了就输出了。而setTimeout根本没起作用。

单恋 | 园豆:678 (小虾三级) | 2014-04-27 21:26
0

使用setTimeout本身是没有任何问题,通过时间间隔,同样可以实现。但,第一个参数需要注意,需要使用function代替,而不是直接把代码写在里面。setTimeout(function(){console.log(i)},10000*i);,大概浏览器需要解析吧。第二种方式,使用字符串代替函数体,setTimeout("console.log(1)",10000*i);。可以实现同样的效果。

收获园豆:10
lucika.zh | 园豆:62 (初学一级) | 2014-04-28 09:28
0

典型的闭包问题,你测试下i看看,i是同一数字。然后如果是闭包问题,就是google闭包吧

arg | 园豆:1047 (小虾三级) | 2014-04-28 20:15

确切地讲是闭包问题的延伸版。这里考虑已经不是单纯的闭包问题了,而是setTimeout

支持(0) 反对(0) gyy_Jade | 园豆:111 (初学一级) | 2014-04-28 21:37

@Iwillknow: 那你总结了吗,打算怎么结贴?

支持(0) 反对(0) arg | 园豆:1047 (小虾三级) | 2014-04-29 16:04
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是怎么来的

Canrz | 园豆:200 (初学一级) | 2014-04-29 15:50

不好意思,我在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>

能具体说下你那边的实际情况吗?^_^

支持(0) 反对(0) gyy_Jade | 园豆:111 (初学一级) | 2014-04-29 18:37

@Iwillknow: 

我是直接在firebug上面输出的,有你要求的时间间隔输出效果哈

第一次的时候,输出1,接着立马就是一个undefined。

支持(0) 反对(0) Canrz | 园豆:200 (初学一级) | 2014-04-29 18:47

@Canrz: 不好意思,没有找到原因。根据检测只是知道,这个undefined是firebug抛出的一个警告,并不是其它原因(如setTimeout)造成的,因为即使运行如下代码也是会有undefined输出,再过分一点只有“var a = 0;”的字样也是会有undefined的输出。~应该是firebug的原因,学术浅薄具体不详>_<,抱歉。

function test() {
    console.log("1");
}
test();
支持(0) 反对(0) gyy_Jade | 园豆:111 (初学一级) | 2014-04-29 19:10

@Iwillknow:额 ,如果去掉test(),单独跑

function test() {
    console.log("1");
}

就会输出一个undefined。

你前面说的“在chrome和FF下测试,输出结果都是1~9,完全不符预期”是什么情况,我firebug和浏览器单开都是隔段时间输出一个数字

支持(0) 反对(0) Canrz | 园豆:200 (初学一级) | 2014-04-29 19:52

@Canrz: 不好意思,是完全符合预期,是能间隔一段时间输出一个数字的。~是undefined的输出不符合

支持(0) 反对(0) gyy_Jade | 园豆:111 (初学一级) | 2014-04-29 19:54

@Iwillknow:哦,了解了,明天再查查问问,看有没有大神解惑 

支持(0) 反对(0) Canrz | 园豆:200 (初学一级) | 2014-04-29 19:56
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册