首页 > 编程语言 >JavaScript中的宏任务和微任务

JavaScript中的宏任务和微任务

时间:2022-12-26 16:00:27浏览次数:37  
标签:setTimeout console log JavaScript 任务 Promise 执行

在 JavaScript 中,宏任务和微任务是指在执行代码的过程中的两种不同的任务类型。

宏任务(macro task)指的是浏览器在执行代码的过程中会调度的任务,比如事件循环中的每一次迭代、setTimeout 和 setInterval 等。宏任务会在浏览器完成当前同步任务之后执行。

微任务(micro task)指的是在当前宏任务执行完成之后立即执行的任务,比如 Promise 的回调函数、process.nextTick 等。

举个例子,假设你有一个代码块:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');

执行这段代码的输出顺序会是:

Start
End
Promise
Timeout

这里的 setTimeout 和 Promise.resolve().then 都是异步操作,但是它们会在不同的时间执行。setTimeout 是一个宏任务,它会在主线程的事件循环中被调度执行,因此它会在同步任务执行完毕之后才会被执行。而 Promise.resolve().then 是一个微任务,它会在当前宏任务执行完成之后立即执行。

在 JavaScript 中,宏任务和微任务是相互独立的,在一次事件循环中会先执行所有的宏任务,然后再执行所有的微任务。举个例子,假设你有这样的一个代码块:

console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
setTimeout(() => console.log('Timeout 2'), 0);
Promise.resolve().then(() => console.log('Promise 2'));

执行这段代码的输出顺序会是:

Start
End
Promise
Promise 2
Timeout
Timeout 2

在这段代码中,第一个 setTimeout 和第一个 Promise.resolve().then 都是在同步任务执行完之后执行的。由于第一个 Promise.resolve().then 是一个微任务,所以它会在第一个 setTimeout 之前执行。第二个 setTimeout 和第二个 Promise.resolve().then 也是在同步任务执行完之后执行的,且它们的执行顺序与第一组宏任务和微任务的执行顺序是一样的。

在 JavaScript 中,宏任务和微任务的执行顺序是非常重要的,因为它会影响到你的代码的执行结果。比如在异步编程中,如果你希望在某个异步操作完成之后立即执行另一个操作,你可以使用微任务来实现。

总结一下,宏任务和微任务是 JavaScript 中用来管理异步操作的两种任务类型,它们在执行顺序上有一定的差别。宏任务会在同步任务执行完之后执行,而微任务会在当前宏任务执行完之后立即执行。理解这两种任务的执行顺序对于编写高效的 JavaScript 代码是非常重要的。

在浏览器环境中,宏任务和微任务是通过浏览器的事件循环机制来管理的。在每一次事件循环中,浏览器会先执行所有的宏任务,然后再执行所有的微任务。这个过程会不断重复,直到所有的宏任务和微任务都被执行完毕。

在 Node.js 中,宏任务和微任务也是通过事件循环机制来管理的,但是它的事件循环机制与浏览器的略有不同。Node.js 中的事件循环使用的是 libuv 库来实现的,它会先执行所有的宏任务,然后再执行所有的微任务,最后再执行 I/O 操作的回调函数。这样的事件循环机制使得 Node.js 在处理 I/O 操作时有更好的性能。

 

标签:setTimeout,console,log,JavaScript,任务,Promise,执行
From: https://www.cnblogs.com/yuzhihui/p/17006017.html

相关文章

  • JavaScript学习--Item30 数组进阶全掌握
    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语......
  • javaScript 列表常用语法基础大全
    javascript数组常用方法1.push()=>语法,数组.push(数据)=>作用:向数组的末尾追加数据=>返回值:添加数据以后,返回新的数组2.pop()=>语法,数组.pop(数据)=>作用:删除......
  • 任务六
    #define_CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<stdlib.h>intmain(){intcount=0;FILE*fp;fp=fopen("C:\\Users\\yuyee\\Desk......
  • 任务五
    #include<stdio.h>#include<string.h>#include<stdlib.h>#defineN100typedefstruct{charnum[10];//学号ints1;//期末成绩ints2;//平时成绩doubles......
  • JavaScript Array 对象高阶方法 some、filter、indexOf
    前言1.some()检测数组中的元素是否满足指定条件2.filter()过滤掉数组中不满足指定条件的值3.indexOf()判断一个元素是否在数组中存在前言JavaScriptArra......
  • 教你用JavaScript实现调皮的字母
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,制作提高打字速度的小游戏-调皮的字母。点击与屏幕上字母相对应的按键,......
  • [Javascript] Chunk array
    Array.from()isagreatwaytochunkuparraysbecauseofthesecondaryargumentbeingamapfunction. consthugeArray=Array.from({length:76},(_,i)=>......
  • 教你用JavaScript实现文字动画
    欢迎来的我的小院,恭喜你今天又要涨知识了!案例内容利用JavaScript实现文字逐步展现的动画效果。演示学习<!DOCTYPEhtml><htmllang="en"><head><metacharse......
  • 任务153:4-管理系统应用搭建_ev
        微服务的拆分原则       ......
  • [Javascript] Destructuring array by using object syntax
    Sincearraysareobjects,wecandestructuretheirindexestoeasilygrabthefirstandlastitmesconstbikes=['bianchi','miele','miyata','benotto','pan......