微任务

Node环境

• 先执行：Process.nextTick
• 然后执行微任务：Promise.resolve或queueMicrotask
• 再然后执行宏任务：setTimeout或setInterval
• 最后执行宏任务：setImmediate

浏览器环境

• 先执行微任务：Promise.resolve或queueMicrotask或MutationObserver
• 然后执行宏任务：setTimeout
• 最后执行宏任务：setInterval

queueMicrotask(() => {
  /* 微任务中将运行的代码 */
});

// 1,创建实例对象，生成一个观察器
// callback是监听回调函数，当主执行栈结束后触发
// 第一个参数是所有变化产生的变化对象的一个数组，第二个参数是观察器本身
const observer = new MutationObserver(function(mutations, observer) {

});


// 2,启动监听器，并指定监听对象，设置监听参数
observer.observer(element, options);
// 如：
observer.observer(element, {
    childList: true, // 监听子节点
    attributes:true, // 监听属性
    charactorData:true, // 监听节点内容
});


// 3,实现微任务代码
function runMicroTask(fn) {
  if (typeof fn !== "function") {
    throw new TypeError("fn is not a function");
  }

  // 创建观察者实例
  const observer = new MutationObserver(fn);

  // 观察元素节点
  const elem = document.createElement("div");
  observer.observe(elem, {
    //至少要传一个配置
    childList: true, // 监听子节点
    attributes: true, // 监听属性
    charactorData: true, // 监听节点内容
  });

  // 元素节点发生改变
  elem.innerText = ".";
}

runMicroTask(()=>{
    console.log('MutationObserver');
})

Promise.resolve().then(()=>{
    console.log("Promise");
})

你想要的，我都有

function runMicroTask(fn) {
    if (typeof fn !== "function") {
        throw new TypeError("fn is not a function");
    }

    if (typeof process !== "undefined") {
        process.nextTick(fn);
    } else if (typeof queueMicrotask === "function") {
        queueMicrotask(fn);
    } else if (typeof Promise === "function") {
        Promise.resolve().then(fn);
    } else if (typeof MutationObserver === "function") {
        // 创建观察者实例
        const observer = new MutationObserver(fn);

        // 观察元素节点
        const elem = document.createElement("div");
        observer.observe(elem, {
            //至少要传一个配置
            childList: true, // 监听子节点
            attributes: true, // 监听属性
            charactorData: true, // 监听节点内容
        });

        // 元素节点发生改变
        elem.innerText = ".";
    }else{
        setTimeout(fn, 0);
    }
}