先看两个js代码片段
for (var i = 1; i <= 5; i++) {
setTimeout(function(){
console.log(i);
}, 0);
}
结果: 输出 5 次 6
var start = new Date;
setTimeout(function(){
var end = new Date;
console.log('Time elapsed:', end - start, 'ms');
}, 500);
while (new Date - start < 1000) {};
结果:Time elapsed 1020ms (不同的机器,数值会有不同,不过都会稍微大于1000)
之所以出现上面的结果,就是由于 setTimeout异步执行的结果,js具体的异步机制如下图所示:
异步执行是 javascript 最重要的一个特性,它的原理: js执行引擎只有一个主线程执行代码逻辑,遇到需要异步执行的任务代码,会将其添加事件队列中。当主线程空闲时,轮询事件队列中可以执行的任务,将其放到主线程进行执行,以此类推,直到事件队列中无可执行的任务。
JS引擎只是执行事件队列中的异步代码,但事件队列中的信息来源并不是JS引擎,而是由浏览器中的其他相关线程产生的,如下图所示:
以 http 传输线程为例:
最常见的就是 js 代码发出 ajax 请求,然后就是交给浏览器的http线程去处理了,当后端有数据返回时,http 线程在事件队列中生成一个数据已ready好的事件,等待 JS 主线程空闲时执行。
再比如,我们常见的click,mouse事件,都是GUI 事件触发线程生成的。当用户点击页面时,GUI 事件触发线程就会在事件队列中生成一个click事件,等待 JS 主线程空闲时执行。