经常会被人问到 你来谈一谈什么是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
用图来表达
image.png
文字叙述就是
(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。
如图
image.pngsetTimeout(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); //最后巩固一下
标签:function,setTimeout,console,log,什么,任务,执行,event,loop From: https://www.cnblogs.com/sexintercourse/p/16658766.html