笔记:eventloop事件循环

207 阅读2分钟

简单讲下eventloop事件循环机制,自己也做个总结。🐼

一句话:执行代码的时候,会先执行同步代码,在时机恰当的时候会把任务队列中的异步代码放到执行栈中去执行,反复轮巡的过程就事件循环。

了解同步任务和异步任务

由于js是个单线程语言,只有一个解析器。所有为了防止某个耗时任务出现程序假死的情况, javaScript 把待执行的代码分为两类:同步任务代码和异步任务代码。

同步任务(synchronous):非耗时任务,指在主线程上排队执行的任务。只有前一个同步任务执行完成,才能执行后一个同步任务。

异步任务(asynchronous):耗时任务,异步任务执行完成后,会通知 JavaScript 主线程执行异步任务的回调函数。

异步任务代码:

  1. 前端js:setTimeout ;setInterval;所有以on开头的事件 onclick onchange onblur .... ;ajax中的 onload 代表数据从服务器成功的返回了。

  2. 后端js:readFile() 读文件等等。。。

同步任务代码:

除去上面这些,一般是同步代码

了解宏任务和微任务

javaScript把异步任务进行了进一步划分:分为宏任务和微任务。

宏任务(macrotask):异步ajax请求,setTimeout 文件操作 等

微任务:promise出现产生的名词。主要有Promise.then、 .catch 和 .finally 等

执行顺序

同步任务和异步任务中的执行顺序:先执行同步任务,只有所有的同步任务执行完毕时,才执行异步任务

事件循环的执行顺序是:先主线程 异步任务 先微后宏 先执行微任务 再执行宏任务

总结

js是一个单线程语言,只有一个解析器所有当碰到同步代码的时候会在执行栈中执行,当碰到异步代码的时候会在时机符合的时候,会将异步代码的回调添加到任务队列中,这个时候当同步代码执行完毕后会在任务队列中将异步代码拿出来,到执行栈中执行,这种反复轮巡任务队列中的异步代码并放在执行栈中执行的操作就叫做事件循环

做题

console.log(1)

setTimeout(function(){
    console.log(2)
    new Promise(function(resolve){
        console.log(3)
        resolve()
    }).then(function(){
        console.log(4)
    })
},1000)

new Promise(function(resolve){
    console.log(5)
    resolve()
}).then(function(){
    console.log(6)
})

setTimeout(function(){
    console.log(7)
    new Promise(function(resolve){
        console.log(8)
        resolve()
    }).then(function(){
        console.log(9)
    })
},500)

// 问打印结果