面试题：JavaScript中如何实现一个自定义的微任务队列，类似Promise的异步执行机制？

Question

请基于JavaScript现有的特性，如事件循环、宏任务和微任务机制，实现一个自定义的微任务队列。该队列需要具备类似Promise的异步执行能力，即能在当前调用栈清空后，按照添加顺序依次执行任务。请详细描述实现思路，并给出核心代码示例。

Answer 1

实现思路

1. 利用 MutationObserver：MutationObserver 是一个异步操作，其回调函数会在微任务队列中执行，可用来模拟微任务执行环境。
2. 创建任务队列：用数组来存储需要执行的任务。
3. 添加任务逻辑：定义一个函数用于向任务队列中添加任务。
4. 执行任务逻辑：通过 MutationObserver 的回调触发任务队列中任务的执行，按照添加顺序依次执行。

核心代码示例

// 创建一个用于触发微任务执行的DOM元素
const observerTarget = document.createElement('div');
document.body.appendChild(observerTarget);

// 创建MutationObserver实例
const observer = new MutationObserver(() => {
    // 当有DOM变动时，开始执行任务队列中的任务
    while (taskQueue.length > 0) {
        const task = taskQueue.shift();
        task();
    }
});

observer.observe(observerTarget, {
    attributes: true
});

// 任务队列
const taskQueue = [];

// 用于向任务队列添加任务的函数
function enqueueMicrotask(callback) {
    taskQueue.push(callback);
    // 触发DOM变动，以执行微任务队列
    observerTarget.setAttribute('data-flag', Date.now());
}

// 示例使用
enqueueMicrotask(() => {
    console.log('第一个微任务');
});
enqueueMicrotask(() => {
    console.log('第二个微任务');
});