关于setTimeout的运行机制

Question

h5Component.on('onLoad',function(){	
		var s=0;
		for(i=0;i<100;i++){
			setTimeout(function(){
				s+=0.01;
				draw(s);
			},i*10+500);//延时.5s
		}
	});

setTimeout第二个参数，（i*10+500），这个时间是什么时候开始算起的？按理说，每次setTimeout的间隔的时间是不一样的，但是，当我把第二个参数设成（i*1000+500）时，我却发现它们是每隔1s进行下一个动画。所以，想知道setTimeout是什么时候开始算时间的？

Answer 1

Lyn 2016-07-08 11:26:55

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

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

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