javascript - 关于MutationObserver 引发的 IntersectionObserver和ResizeObserver的callback类型？

Question

MutationObserver 我们知道，他的callback会被加入到微任务队列中，后面在逛帖子的时候又遇到了 IntersectionObserver和ResizeObserver的callback ，我在想他们俩得callback是什么类型，然后去MDN上面看文档，发现MutationObserverMDN上面也没有明确说明（也可能是我看漏了）。IntersectionObserver和ResizeObserver也没有说明，所以才有了这个问题！

Answer 1

有啊，在各自的构造函数小节都有介绍：

参考文档：
MDN-IntersectionObserver
MDN-ResizeObserver

补充

已知条件：
微任务： 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"));// 宏任务2setTimeout(() => {console.log('宏任务2');}, 0);console.log("代码结束");

输出为：

代码开始代码结束mutation observer微任务 promise thenmutation observerintersection 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"));// 宏任务2setTimeout(() => {    console.log('宏任务2');}, 0);console.log("代码结束");

结果为：

代码开始代码结束微任务 promise thenmutation observerresize observer宏任务宏任务2

所以 ResizeObserver 也是微任务

Answer 2

关于MutationObserver、IntersectionObserver和ResizeObserver的callback类型，MDN（Mozilla Developer Network）上确实没有明确说明。不过，一般来说，这些观察器的callback通常具有以下结构：

function callback(mutationsList, observer) {  // 处理观察到的变化}

其中，mutationsList是一个包含所有已观察到的变化的列表，而observer是观察器对象本身。

对于IntersectionObserver和ResizeObserver，它们的callback通常具有以下结构：

function callback(entries, observer) {  // 处理交集或尺寸变化}

其中，entries是一个包含所有观察目标的交集或尺寸变化的列表，而observer是观察器对象本身。

需要注意的是，具体的callback函数参数可能会有所不同，具体取决于你使用的库或框架。因此，最好查阅你所使用的库或框架的文档以获取更准确的信息。