你真的知道setTimeout是如何运行的吗?
首先大家看看如下代码,猜猜运行结果如何:
var start = new Date;
console.log(1);
setTimeout(function(){
console.log('从开始到现在时间过了:'+(new Date - start)+'毫秒');
console.log(2);
},1000);
console.log(3);
setTimeout(function(){
console.log('从开始到现在时间过了:'+(new Date - start)+'毫秒');
console.log(4);
},2000);
console.log(5);
结果是:
1
3
5
(约过了1秒左右)从开始到现在时间过了:1015毫秒
2
(约过了2秒左右)从开始到现在时间过了:2016毫秒
4
您猜对了没?
这里通过setTimeout来延迟执行的函数都被推到最后才执行了;
原理如下:
在现有浏览器环境中,Javascript执行引擎是单线程的,主线程的语句和方法,会阻塞定时任务的运行,在Javascript执行引擎之外,存在一个任务队列,当在代码中调用setTimeout()方法时,注册的延时方法会挂到浏览器内核其他模块处理,当延时方法到达触发条件,即到达设置的延时时间时,该模块再将要执行的方法添加至该模块的任务队列中。这一过程与执行引擎主线程独立,执行引擎在主线程方法执行完毕,到达空闲状态时,才会从该模块的任务队列中顺序提取任务来执行,这期间的时间,可能大于注册任务时设置的延时时间;浏览器在空闲状态下,会不断的尝试从模块的任务队列中提取任务,这称为事件循环模型。
Javascript执行引擎的主线程运行的时候,产生堆(heap)和栈(stack)。程序中代码依次进入栈中等待执行,当调用setTimeout()方法时,浏览器内核相应模块开始延时方法的处理,当延时方法到达触发条件时,方法被添加到用于回调的任务队列,只要执行引擎栈中的代码执行完毕,主线程就会去读取任务队列,依次执行那些满足触发条件的回调函数。
如想详细了解 JavaScript运行机制 请点击这里→ JavaScript 运行机制详解