关于MutationObserver 引发的 IntersectionObserver和ResizeObserver的callback类型？-灵析社区
莫克先森**MutationObserver** 我们知道，他的callback会被加入到微任务队列中，后面在逛帖子的时候又遇到了 **IntersectionObserver和ResizeObserver的callback** ，我在想他们俩得callback是什么类型，然后去MDN上面看文档，发现**MutationObserver** MDN上面也没有明确说明（也可能是我看漏了）。IntersectionObserver和ResizeObserver也**没有说明** ，所以才有了这个问题！
北北che有啊，在各自的构造函数小节都有介绍：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241016/498e9be272b775880ed40594263f4837.png)
«参考文档：
"MDN-> IntersectionObserver" (https://link.segmentfault.com/?enc=7u6mnSW8N%2FeaD0s1GqMCxA%3D%3D.ne0EhaXjmgJRvsfX4lU4LrfQMevbyoAO5Clt3pJhxub7%2B0ptlccyRC0dmn%2BTEVVUpIb3yT5lAsb%2BLnWE5XrMwNwoWYsVgxW4WCEIfi2oIhtdXNqXQarAKahr%2BwDmXmfi)
"MDN-> ResizeObserver" (https://link.segmentfault.com/?enc=XjLYJPABMmKq7PjWEgjm7w%3D%3D.V8NNsuCp3nIEUso6xqeRBOrSO0rs8QzC7JdEMJ634HV8et4XjJ7RJ8Rw2jHBILAX%2FGANnD4g72UrdH73gGksqduYzamkrKIhRWpMCm6Imh0%3D)»
补充
已知条件：
微任务： "Promise"、"MutationObserver"
宏任务："setTimeout"
判断宏任务或微任务的方案如下（测试环境为 谷歌浏览器 ，不同浏览器可能有不同实现）
首先是 "MutationObserver"
console.log("代码开始");
// MutationObserver （MDN确认为微任务）
const observer = new MutationObserver((mutations) => {
console.log("微任务", "mutation observer");
});
observer.observe(document.body, { childList: true });
document.body.appendChild(document.createElement("div"));
// promise 为微任务
Promise.resolve().then(() => console.log("微任务", "promise then"));
// 宏任务
setTimeout(() => {
console.log('宏任务');
}, 0);
console.log("代码结束");
输出结果为：
代码开始
代码结束
微任务 mutation observer
微任务 promise then
微任务 mutation observer
宏任务
可以确认为微任务
再来看 "IntersectionObserver"：
console.log("代码开始");
// MutationObserver （MDN确认为微任务）
const observer = new MutationObserver((mutations) => {
console.log("mutation observer");
});
observer.observe(document.body, { childList: true });
// 宏任务
setTimeout(() => {
console.log('宏任务');
}, 0);
const observer2 = new IntersectionObserver ((mutations) => {
console.log("intersection observer");
});
observer2.observe(document.body);
document.body.appendChild(document.createElement("div"));
// promise 为微任务
Promise.resolve().then(() => console.log("微任务", "promise then"));
// 宏任务2
setTimeout(() => {
console.log('宏任务2');
}, 0);
console.log("代码结束");
输出为：
代码开始
代码结束
mutation observer
微任务 promise then
mutation observer
intersection observer
宏任务
宏任务2
显然，"Intersection" 也是微任务
最后是 "ResizeObserver"：
console.log("代码开始");
// MutationObserver （MDN确认为微任务）
const observer = new MutationObserver((mutations) => {
console.log("mutation observer");
});
observer.observe(document.body, { childList: true });
// 宏任务
setTimeout(() => {
console.log('宏任务');
}, 0);
const observer2 = new ResizeObserver((mutations) => {
console.log("resize observer");
});
observer2.observe(document.body);
document.body.style.width = '1000px'
// promise 为微任务
Promise.resolve().then(() => console.log("微任务", "promise then"));
// 宏任务2
setTimeout(() => {
console.log('宏任务2');
}, 0);
console.log("代码结束");
结果为：
代码开始
代码结束
微任务 promise then
mutation observer
resize observer
宏任务
宏任务2
所以 "ResizeObserver" 也是微任务