JavaScript宏任务和微任务（setTimeout，Promise）

最新推荐文章于 2025-04-10 17:10:54 发布
最新推荐文章于 2025-04-10 17:10:54 发布
阅读量579 收藏
点赞数
分类专栏： html 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizfs_csdn/article/details/126748347
版权
本文介绍了JavaScript中setTimeout、setInterval的基本使用，展示了Promise处理异步流程控制的方法，并提到了process.nextTick的作用。通过实例解析了宏任务与微任务的执行顺序。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
    <head>

    </head>
    <body>
        <script>
            console.log('hello first')
            // 立即异步执行  宏任务 队列
            // HTML5 规范规定最小延迟时间不能小于 4ms ，即 x 如果小于 4 ，会被当做 4 来处理。 不过不同浏览器的实现不一样，比如，Chrome可以设置1ms，IE11/Edge是4ms。
            setTimeout(function () {
                console.log('setTimeout immediately')
            }, 0)

            // 延时1000ms后 宏任务 队列
            var timeoutId = setTimeout(function () {
                console.log('setTimeout after 1000 ms')
            }, 1000)

            //取消setTimeout
            clearTimeout(timeoutId)

            // 循环执行 1000ms 执行一次
            var intervalId = setInterval(function () {
                console.log('setInterval 1000ms')
            }, 1000)

 

最低0.47元/天 解锁文章
js同步任务，宏任务，微任务 await promise setTimeout
FE攻城狮
06-29 662
1、弄清楚执行顺序，就要弄清楚哪里是要进宏任务队列，哪里是要进微任务队列，哪个是同步代码，哪个是异步代码。 2、await上面的代码和后面的代码是直接执行的，await下面的代码是要进微任务队列的 3、promise的resolve是同步执行的，then里的代码是要进微任务队列的 4、setTimeout是进宏任务队列的 5、代码先执行同步代码，后执行任务队列 6、先执行微任务队列，后执行宏任务队列 7、队列秉持先进先出原则！！！...
一分钟理解JavaScript宏任务和微任务
weixin_44739881的博客
10-17 1423
JavaScript是单线程的。所以有了同步异步的概念，想必不用说了，异步如常见的setTimeout、Promise。这两个东西却有本质上的区别。setTimeout是宏任务，Promise是微任务。 同为宏任务的有setInterval等，同为微任务的有Node的process.nextTick等。见下图。相比于宏任务，微任务的开销会小一点。 JS代码执行的顺序是，按着主线程执行代码，当遇到一...
前端面试题：setTimeout是宏任务还是微任务？
qq_46582421的博客
02-28 1904
宏任务。
js 事件循环，宏任务、微任务，setTimeout
weixin_43915401的博客
03-03 566
Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈)，所有的任务都会被放到调用栈等待主线程执行。 同步任务会在调用栈中按照顺序等待主线程依次执行 异步任务会先进入Event Table并注册函数，当指定的事情完成后，Event Table会将注册的回调函数放入移入Event Queue，等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。 宏任务 MacroTask：script全部代码、setTimeout、setInterval、se
Promise(微任务)和setTimeout(宏任务)的理解
最新发布
m0_37609239的博客
04-10 828
Promise 主要用于处理异步操作的结果，而 setTimeout 用于延迟执行某段代码。Promise 可以链式调用，便于处理多个异步操作的结果，而 setTimeout 只是简单的延迟执行。
js的setTimeout和Promise---同步异步和微任务宏任务
weixin_34050389的博客
01-26 1191
久经前端开发沙场，会经历各式各样的需求，处理这些需求时候，会使用各种各样的api和功能，这里集中对setTimeout和Promise的异步功能进行讨论一下。 单独使用的执行模式 这里就使用Promise作为例子，来探究一下单独使用它，会有哪些注意点。 1.最初的试探 执行代码，Promise的基本使用： let fn = () =...
setTimeout和Promise，对macrotasks（宏任务），microtasks（微任务）的理解
Little_Pig_Bug的博客
11-14 794
console.log(1); setTimeout(function(){ console.log(2); }, 0); Promise.resolve().then(function(){ console.log(3); }).then(function(){ console.log(4); }); console.log(5); 结果：1,5,3,4,2 javascrip...
setTimeout和Promise区别（宏任务和微任务）
u011200562的博客
05-05 3099
javascript的宏任务和微任务 宏任务有Event Table、Event Queue，微任务有Event Queue 1.宏任务：包括整体代码script，setTimeout，setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)； 2.微任务：Promise、MutaionObserver、process.nextTick(Node.js 环境) 注：new Promise中的代码会立即执行，then函数分发到微任务队列，process.next
JavaScript事件循环及宏任务微任务原理解析
10-14
在JavaScript中，任务分为两类：同步任务和异步任务。同步任务是按顺序执行的，而异步任务分为宏任务（MacroTask）和微任务（MicroTask）。 宏任务主要包括：整个脚本、setTimeout、setInterval等。这些任务会在...
Vue学习记录之十九 Event Loop,宏任务和微任务
LvManBa的博客
10-22 969
当一个宏任务执行完毕后，会检查是否有微任务队列，如果有，则将微任务队列中的所有任务依次执行完毕，然后再继续选择下一个宏任务执行。这样的过程循环进行，形成了事件循环。微任务通常在宏任务执行完毕后立即执行，因此微任务具有更高的优先级，可以在页面渲染前执行，从而提供更好的用户体验。微任务的优先级高于宏任务，因此微任务会在本轮宏任务执行结束后立即执行，而不是等到下一个事件循环。按顺序执行， 同步任务直接执行，异步任务进入异步队列，执行完以后，在进行入异步列队，然后在看是同步还是异步任务，如此循环执行。
微任务 宏任务 promise settimeout
qq_38935512的博客
02-03 1137
宏任务 ：setTimeout、setInterval 宏任务 ：promise nixtTick EvenT Loop JS得事件循环机制 js得执行模式有点像排队得模式，执行完一个执行下一个，这时候有一些任务需要很长时间才能完成，这时候就有了一个异步队列,将这些任务放到异步队列中，当主线程执行完毕以后，再执行异步队列中得任务列表。 异步队列 分为微任务 和 宏任务，先执行所有得微任务，完毕之后再执行宏任务， 这里看看代码得一个执行先后顺序 注意下：new Promise得方法和.then（）中得代.
一道题理解setTimeout,Promise,async/await以及宏任务与微任务
weixin_30572613的博客
07-15 518
今天看到这样一道面试题： //请写出输出内容 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2');...
宏任务，微任务，事件循环event loop、setTimeout,setInterva、nextTick与process.nextTickl区别【示例讲解】
luemeon的博客
09-21 1120
不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。，只会被推入到更新队列中一次，可以避免重复修改相同的dom，这种去除重复数据，对于避免不必要的计算和 DOM 操作是非常重要的。考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况。setTimeout/setInterval是宏任务，根据事件轮询机制，其他任务会阻塞或延迟js任务的执行。
宏任务和微任务
qq_52666510的博客
07-16 324
宏任务：整体代码script，setTimeout，setInterval 微任务：Promise，process.nextTick setTimeout是宏任务，先放入到宏任务的event队列里面，然后代码继续往下查看是否有微任务，promise的then函数把它放入了微任务序列，等到主线程的所有代码执行结束后，先从微任务队列里拿掉函数，最后微任务队列空了后再从宏任务队列中拿函数。 即：用通俗的话来说，先执行微任务中的promise中的，再执行script函数里面的console.log里面的，
Day 257/300 JS中宏任务（setTimeout）和微任务（async await）的执行顺序的demo
xinghuowuzhao的博客
09-02 177
2、遇到await后面非当前行的内容，是在函数执行后，才执行的；1、遇到await后面当前行的内容（无论语句还是函数方法）；3、宏任务队列中会按照push进去的先后顺序，依次打印输出；
js的eventloop中的宏任务和微任务理解，实现对setTimout定时器补偿
有问题 ! 请留言 !
03-26 594
js的eventloop中的宏任务和微任务理解，实现对setTimout定时器补偿 写有关宏任务和微任务的优秀博文有很多已经差不多讲的很详细，写这边博客并不是要做一个补充， 大略只是对自己学习理解做一个记录补充，同时进行分享。有助于输出推动学习。 外文链接：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/...
setTimeout原理
Christlxl的博客
01-31 1040
steTimeout
宏任务与微任务的理解
weixin_47981807的博客
01-15 8574
宏任务与微任务的理解 宏任务一般是：包括整体代码script、settimeout、setInterval、i/o、ui render 微任务：promise、object.observe、MutationObserver 两者的区别 宏任务 宏任务所处的队列就是宏任务队列 宏任务队列可以有多个 当宏任务队列中的任务全部执行完以后就会查看是否有微任务队列 如果有就先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列 微任务 微任务所处的队列就是微任务队列 只有一个微任务队列 在上一个宏任.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程经验随笔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值