微任务队列宏任务队列

  1. javascript是单线程,多线程都是模拟出来的,

  2. script、setTimeOut、setInterval是宏任务

  3. Promise,process.nextTick是微任务

  4. setTimeOut是n毫秒之后,将回调函数放入任务执行队列;setInterval是每隔n毫秒将回调函数推入任务执行队列,不能保证n毫秒之后立即执行!

  5. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    setTimeout(()=>{
    console.log(1)
    },0)
    let i =0
    while(i<10000){
    i++
    console.log(2)
    }

    setTimeout(() => {
    console.log(3)
    }, 0)
    2 1 3

    虽然setTimeout很早就注册了,但是要等到同步任务,宏任务执行完毕才执行微任务
    再看一段复杂一点的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    console.log('1');
    new Promise((resolve) => {
    console.log('1.1');
    resolve()
    }).then(() => {
    console.log('2');
    }).then(()=>{
    console.log('2.1')
    })
    console.log(4)

输出1 1.1 4 2 2.1
console.log是同步任务,new Promise之后取出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
console.log('1');                   //a同步任务,输出1
setTimeout(function() { //b放入队列,宏任务 h执行宏任务
console.log('3'); // i同步任务,输出3
new Promise(function(resolve) { // j同步任务,输出3.1
console.log('3.1');
resolve();
}).then(function() { // k微任务,放入队列,插队输入4
console.log('4')
})
})

new Promise(function(resolve) {
console.log('1.1'); //c同步任务,输出1.1
resolve();
}).then(function() {
console.log('2') //d放入队列,微任务 g优先执行微任务,输出2
})

setTimeout(function() { //e放入队列,宏任务 l执行队列中的宏任务
console.log('5'); // m同步任务,输出5
new Promise(function(resolve) {
console.log('5.1'); // n放入队列,队列无任务,立即执行输出5.1
resolve();
}).then(function() { // o放入队列,队列无任务,立即执行输出6
console.log('6')
})
})
//f结束没有同步任务了,开始执行微任务队列

最后答案
1 1.2 2 3 3.1 4 5 5.1 6

相关文章
评论
分享
  • functionalTemplate

    在使用iview表格的时候,定制组件,需要用到renderHeader API,看了一下如何传入render函数,结果惊为天人 12345678910111213141516export default { name:...

    functionalTemplate
  • 罗盘时钟

    罗盘时钟不刷抖音但是最近也听说了有很火的罗盘时钟,废话不多说直接上代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445...

    罗盘时钟
  • 如何判定我点了margin?

    这个世界上唯有两样东西能让我们的心灵感到深深的震撼:一是我们头顶上灿烂的星云,二是我们心中崇高的道德法则。 one - 康德 前言页面的绑定事件都是绑定在DOM元素上的,诸如此类 123document.getElementById(...

    如何判定我点了margin?
  • 自动微信读书

    前言最近在学习ReactNative,真机调试的时候安装的ADB调试工具,突发奇想,既然PC可以操控手机,是不是可以做一些懒得做的事情 流程 通过USB链接真机调试 执行wifi调试 123adb tcpip 5555adb co...

    自动微信读书
  • docker-Dockerfile篇

    什么是DockerfileDockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明,相当于快速构建时候的脚本文件 获取images 首先明确需要获取的image版本,以目前LTS的nodejs版...

    docker-Dockerfile篇
  • Docker-安装篇

    what is DockerDocker 是一个开源的应用容器引擎换句话说就是运行的系统里的虚拟机,可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。优点是容...

    Docker-安装篇
  • 初探electron

    什么是 electron使用html、css、javascipt、nodejs来编写跨平台的客户端程序,可以使windows、linux、macos 优点一次代码编写,多端打包 起步

    初探electron
  • 粘贴图片上传功能

    粘贴图片并上传最近在写博客的时候,纯MarkDown语法写,但是发现图片是个需求,需要经常截图并且写到MarkDown里面之前的做法是用QQ截图,然后另存为到本地桌面,然后再上传,返回URI地址,贴到博客编辑器里面最近发现有些页面支持...

    粘贴图片上传功能
  • 记一次sql性能优化

    有个小需求,在表里根据页码和页数查询,并排序,很简单,3秒就写出的sql 1select * from newslist order by id desc limit ${(currPage - 1) * pageSize&...

    记一次sql性能优化
  • 花式log

    各种控制台输出常见的控制台打印123456console.log() // 打印日志console.debug() // 打印调试console.error() // 打印错误console.info() // 打印信息...

    花式log