美文网首页JS
JS事件循环机制

JS事件循环机制

作者: 你好岁月神偷 | 来源:发表于2021-11-15 09:34 被阅读0次

javascript 是单线程。

必须记住~

new Promise() // new 一个对象瞬间执行的,

.then 是异步(微任务)

微任务跟在当前宏任务之后执行的,整体代码(javascript标签内的代码)为宏任务。

事件循环机制是:优先执行宏任务,当执行完一个宏任务时(同时也会执行跟在当前宏任务之后的所有微任务),会执行另外一个宏任务(同时也会执行跟在当前宏任务之后的所有微任务)... 直到所有任务全部执行完毕。

小试身手--如下:

例子1

代码的执行逻辑:

    ① 在截图例子中, script标签内为所有 js代码 为宏任务一,代码开始执行 js代码时

    ② 遇见 console.log('script start') 时,代码直接执行,在浏览器的控制台会输出第一项 script start;

    ③ 遇见 setTimeout 时,发现它为宏任务二,先放到任务队列中,先放过它~

    ④ 遇到 promise.then() 时,发现它是微任务,会立即跟随在宏任务一后,

    ⑤ 遇见console.log('script end')时,代码直接执行,在浏览器的控制台中输出第二项 script end;

    ⑥ 再往后,发现没有要执行的js代码了,说明宏任务一执行完成,接下来就要执行跟随在宏任务一后的微任务,会执行 Promise.then() 里的代码,在浏览器的控制填中输出第三项 promise1 以及第四项 promise2,至此第一个宏任务及跟在其后的所有微任务都执行完毕。

    ⑦ 接下来会执行第二个宏任务 setTimeout ,发现就仅需要执行 console.log('setTimeout');所以在控制台会直接输出 第五项 setTimeout, 至此代码执行完毕。

截图中的整体代码结果为:

script start

script end

promise1

promise2

setTimeout

源码传送门:https://codepen.io/enjoykai/pen/MWvPLPd?editors=1012

相关文章

  • js事件循环

    js 是单线程的, js 的异步事件就是依赖于事件循环机制 事件循环 首先,我们来解释下事件循环是个什么东西: 就...

  • 2019-03-28

    JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同 这篇文章的核心是分析js的事件循环,在此我...

  • Vue源码分析—响应式原理(四)

    nextTick JS 运行机制 JS 执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个步骤: 所有同...

  • node 事件

    1、事件 1.1普通事件的使用 1.2、Node.js 的事件循环机制解析 1)Node 由事件循环开始,到事件循...

  • js 事件循环机制

    事件循环机制: 以任务队列形式,同步任务,异步任务 同步任务:在主线程上排队的任务,前一个执行完,执行后一个 异步...

  • js事件循环机制

    程序开始执行之后,主程序开始执行同步任务,碰到异步任务就把它放到任务队列中,等到同步任务全部执行完之后,js引擎就...

  • js 事件循环机制

    日期:2020 年 7 月 10 日 js 事件循环机制 前言 众所周知,JavaScript 是一门 单线程 的...

  • JS事件循环机制

    1、事件循环 图中heap表示堆和stack表示执行栈,web apis表示一些异步事件,callback que...

  • js事件循环机制

    基本知识 js是单线程的,只有一个主线程处理逻辑 事件循环的作用 保证主线程, 有序并高效 或非阻塞 的处理 在j...

  • js事件循环机制

    1. 什么是事件循环? js引擎并不是独立运行的,它运行在宿主环境中,对多数开发者来说通常就是web浏览器。经过最...

网友评论

    本文标题:JS事件循环机制

    本文链接:https://www.haomeiwen.com/subject/ojxtaltx.html