经常会被人问到 你来谈一谈什么是event loop,一开始我是一脸懵逼,慢慢的在网上看到很多贴子 才明白是怎么回事.先看一段代码
console.log(0)
setTimeout(function() {
console.log(1)
}, 1000);
console.log(2)
//打印顺序是 0 2 1
js的事件循环
我们都知道 js是单线程的
原因:。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
所以,为了避免复杂性,从一诞生,JavaScript就是单线程
由于js是单线程的,只有当上一个任务完成之后才会继续完成下一个任务,如果前一个任务耗时很长,后一个任务就不得不一直等着。于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
同步任务
在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务
不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
上面代码中 主线程首先会打印0.遇到setTimeout时按照异步处理,1秒之后,setTimeout的回调函数会进入任务队列,主线程会继续运行 打印2,当主线程中的任务运行完成之后,会运行任务队列中的任务 打印出1
用图来表达
文字叙述就是
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。
主线程从任务队列中读取事件,这个过程是不断循环的,所以整个的运行机制称为event loop。
macro-task(宏任务)和micro-task(微任务)
任务还可以分为宏任务和微任务
宏任务:macrotask 可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行,每一个宏任务会从头到尾将这个任务执行完毕,不会执行其它)包括整体代码script,setTimeout,setInterval
微任务:,可以理解是在当前 task 执行结束后立即执行的任务 包括Promise,process.nextTick
上代码
setTimeout(function() {
console.log('1');
})
new Promise(function(resolve) {
console.log('2');
}).then(function() {
console.log('3');
})
console.log('4');
//打印顺序 2 4 3 1
首先整体代码是一个宏任务,遇到setTimeout,会创建另一个宏任务,接着执行当前的宏任务,Promise 新建后就会立即执行。所以会首先打印2,then方法是一个微任务,遇到then,添加到微任务队列,代码接着执行会打印4。此时宏任务执行完毕,接着就会检查当前微任务队列是否有微任务,如果有,立即执行当前的微任务(也就是then 打印3),当前微任务执行完毕之后,开始执行下一轮的宏任务setTimeout,会打印1。
如图
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(resolve, reject) {
console.log(2)
for(var i = 0; i < 10000; i++) {
if(i === 800) {
console.log(10)
}
i == 9999 && resolve();
}
console.log(3)
}).then(function() {
console.log(4)
})
setTimeout(function() {
console.log(9);
new Promise(function(resolve) {
console.log(7);
resolve();
}).then(function() {
console.log(8)
})
}, 0);
console.log(5);
//最后巩固一下