IntersectionObserver和ResizeObserver回调函数的执行时机：微任务还是宏任务？
虽然MutationObserver的回调函数明确运行在微任务队列中，但IntersectionObserver和ResizeObserver回调函数的执行环境却并非显而易见。本文将通过测试和分析，探究其运行机制。
规范中的描述：
MDN文档中对IntersectionObserver和ResizeObserver的构造函数部分都描述了其回调函数类型：IntersectionObserverCallback和ResizeObserverCallback，分别接收IntersectionObserverEntry列表和IntersectionObserver或ResizeObserverEntry列表和ResizeObserver作为参数。然而，文档并未明确指出回调函数的执行时机。
测试代码及结果分析：
为了确定IntersectionObserver和ResizeObserver回调函数的执行时机，我们设计了以下测试代码：
console.log("代码开始");// MutationObserver (微任务)const mo = new MutationObserver(() => { console.log("微任务", "Mutation Observer");});mo.observe(document.body, { childList: true });// IntersectionObserver (测试对象)const io = new IntersectionObserver((entries) => { console.log("测试对象", "Intersection Observer");});io.observe(document.body);// ResizeObserver (测试对象)const ro = new ResizeObserver((entries) => { console.log("测试对象", "Resize Observer");});ro.observe(document.body);// Promise (微任务)Promise.resolve().then(() => { console.log("微任务", "Promise then");});// setTimeout (宏任务)setTimeout(() => { console.log("宏任务");}, 0);console.log("代码结束");
运行结果通常如下（顺序可能略有差异，但IntersectionObserver和ResizeObserver始终在Promise之后，宏任务之前）：
代码开始代码结束微任务 Mutation Observer微任务 Promise then测试对象 Intersection Observer测试对象 Resize Observer宏任务
结论：
通过以上测试，我们可以得出结论：IntersectionObserver和ResizeObserver的回调函数也运行在微任务队列中，其执行时机在Promise的then回调之后，setTimeout回调之前。 这与MutationObserver的执行环境一致，都属于微任务。 这确保了这些回调函数在浏览器渲染下一帧之前执行，从而保证了页面更新的流畅性。
以上就是IntersectionObserver和ResizeObserver的回调函数究竟运行在微任务还是宏任务中？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502335.html
微信扫一扫 
支付宝扫一扫 
