JavaScript 事件循环中微任务怎么在事件分发后执行-js教程-PHP中文网

微任务在事件分发后执行，是因为 javascript 引擎将宏任务队列和微任务队列分开处理。每次从宏任务队列取出一个任务（如 settimeout）执行完毕后，引擎会清空当前微任务队列中的所有任务，然后才进入下一轮事件循环。

JavaScript 事件循环中微任务怎么在事件分发后执行

为什么 setTimeout 回调里打印的 DOM 元素是空的？

因为 setTimeout 的回调属于宏任务，它在 DOM 更新（同步代码）之后、下一次渲染之前执行。如果在回调中直接读取 DOM，拿到的还是旧状态。

JavaScript 事件循环中微任务怎么在事件分发后执行

const btn = document.getElementById('btn');

// 同步修改 DOM
document.body.innerHTML = '<button id="btn">Click</button>';

// 宏任务：此时 DOM 已更新，但尚未重绘
setTimeout(() => {
    const newBtn = document.getElementById('btn');
    console.log(newBtn); // <button id="btn">Click</button>
}, 0);

// 微任务：在宏任务前执行，DOM 还是旧的
Promise.resolve().then(() => {
    const oldBtn = document.getElementById('btn');
    console.log(oldBtn); // null
});

预期结果：
第一次 console.log 输出按钮元素。
第二次 console.log 输出 null。

如何确保在 DOM 更新后获取最新元素？

使用 MutationObserver 监听 DOM 变化，它会在 DOM 变更完成后触发，且其回调属于微任务级别，能捕获到最新的 DOM 状态。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

JavaScript 事件循环中微任务怎么在事件分发后执行

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
            const btn = document.getElementById('btn');
            console.log(btn); // <button id="btn">Click</button>
        }
    });
});

observer.observe(document.body, { childList: true });

// 同步修改 DOM
document.body.innerHTML = '<button id="btn">Click</button>';

预期结果：
console.log 输出按钮元素。