IntersectionObserver和ResizeObserver的回调函数究竟运行在微任务还是宏任务中？-js教程-PHP中文网

IntersectionObserver和ResizeObserver的回调函数究竟运行在微任务还是宏任务中？

霞舞

发布： 2025-02-24 10:06:10

原创

895人浏览过

intersectionobserver和resizeobserver的回调函数究竟运行在微任务还是宏任务中？

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的回调函数究竟运行在微任务还是宏任务中？的详细内容，更多请关注php中文网其它相关文章！