关于setTimeout的运行机制

Question

1

<span>h5Component.on('onLoad',function(){   <br>        var s=0;<br>        for(i=0;i<100;i++){<br>          setTimeout(function(){<br>              s+=0.01;<br>                draw(s);<br>            },i*10+500);//延时.5s<br>     }<br>   });<br><br>setTimeout第二个参数，（i*10+500），这个时间是什么时候开始算起的？按理说，每次setTimeout的间隔的时间是不一样的，但是，当我把第二个参数设成（i*1000+500）时，我却发现它们是每隔1s进行下一个动画。所以，想知道setTimeout是什么时候开始算时间的？<br></span>

Answer 1

Lyn 2016-07-08 11:26:55

其实这块代码并没有什么特殊的，这段代码展开看看

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var s=0 ;   // -------------- 展开之前，先把 setTimeout 里面的函数拿出来   var func = function () {     s += 0.01; // 函数内部，只引用了 变量 s ，反正是会执行100次，那 s 一定是 [ 0 , 0.01 , 0.02 ... 1 ]     draw(s); };   for (i = 0; i < 100; i++) {     setTimeout(func , i * 10 + 500); }     // -------------- 手动展开 for 循环   setTimeout(func , 1 * 10 + 500); //延时.51s setTimeout(func , 2 * 10 + 500); //延时.52s setTimeout(func , 3 * 10 + 500); //延时.53s setTimeout(func , 4 * 10 + 500); //延时.54s // ... setTimeout(func , 100 * 10 + 500); //延时1.50s   // 就这样执行了100次函数 func 而已

• 提问者 Xuewa #1

  执行setTimeout(func , 1 * 10 + 500);时，离执行setTimeout(func , 2 * 10 + 500);还有多少时间？ 是（2 * 10 + 500）还是（2 * 10 + 500）-（1 * 10 + 500）？

• 提问者 Xuewa #2

  非常感谢！

Answer 2

益铭 2016-07-08 12:09:36

都是同时算起的，事件是你预先定义的，浏览器会先解析，相当于定义了一个延时执行的队列，当事件被触发时每个都被通知到准备开始执行，然后按自己的延时先后执行。做个比喻，就好像军训里的报数，我们被教导怎么报数（事件定义），然后等到教官发布命令“报数”（事件触发），我们就开始挨个喊自己的数字。