深入理解setTimeout

今天认认真真的去了解了一下setTimeout之后，我才发现，我以前可能对setTimeout有什么误解…
认真看完我这篇文章，包教包会~

什么是setTimeout？

setTimeout(fun,time);//fun为一个函数，time为等待的时间。
等待time时间后，把要执行的任务(fun)加入到Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于time。

setTimeout(function () {
		console.log('1');
	} , 3000);
setTimeout(function () {
		console.log('2');
	} , 1000);
console.log('3');
//结果是：
3 2 1

1. 先执行主线程任务，输出3；
2. 等待1s后，将function () {console.log(‘2’);}放入Event Queue中，若主线程任务执行完，将Event Queue中的任务放入主线程执行，输出2；
3. 等待3s后，将function () {console.log(‘1’);}放入Event Queue中，若主线程任务执行完，将Event Queue中的任务放入主线程执行，输出1；

setTimeout(function () {
		console.log('1');
	} , 1000);
setTimeout(function () {
		console.log('2');
	} , 1000);
console.log('3');
//结果是：
3 1 2

如果等待的时间相同的话，按照代码中函数的出现顺序放入Event Queue中。

setTimeout(function () {
		console.log('1');
	} , 0);
setTimeout(function () {
		console.log('2');
	} , 0);
console.log('3');
//结果是：
3 1 2

尽管等待时间为0，也仍然放入Event Queue中，等主线程任务执行完之后，再将Event Queue中的任务读取到主线程执行。

什么时候开始计时？

setTimeout设置了一个等待的时间，这个时间是从执行到这条语句开始计时，还是主线程中的语句执行完毕后再开始计时的呢？
我们可以用下面这段代码来测试一下：

console.log(1);
setTimeout(function (){console.log(3);},5000)
for(var i=0;i<10000000;i++){//利用操作dom效率低下的特点
	document.createElement('div');
}
console.log(2);

输出：1 2 3
这里，1 2之间间隔了很长时间，因为for循环执行了很久，而 2 3之间是没有间隔直接输出的。从这里可以看出，setTimeout设置的时间，不是等主线程执行完开始计时，而是当执行到这条语句时就开始计时了~

再来看一个例子：

console.log(1);
setTimeout(function (){console.log(3);},5000);
for(var i=0;i<10000000;i++){
	document.createElement('div');
}
setTimeout(function (){console.log(4);},7000);
console.log(2);
//输出
1 2 3 4

这里2 4之间的时间间隔是7s，2 3之间几乎没有时间间隔，因为等待时间是从执行setTimeout语句开始计时的，for循环的时间≥5s，所以，在输出2之后就立马输出3了。