选用微任务而非setTimeout，因其在每次事件循环末尾统一执行并自动合并多次触发，确保只校验最后一次输入且获取最新DOM值；而setTimeout作为宏任务会累积延迟、无法去重。
用微任务实现表单脏检查异步队列，核心是利用 Promise.resolve().then() 或 queueMicrotask() 延迟执行校验逻辑，确保在用户输入的同步操作（如 input、change）完成后、DOM 更新已生效但尚未进入宏任务阶段时触发检查。这样既能避免频繁校验，又能保证响应及时、不阻塞渲染。
为什么选微任务而不是 setTimeout？
宏任务（如 setTimeout）会等到当前任务+所有微任务执行完后才运行，可能造成校验延迟（比如连续输入 5 次，触发 5 次 setTimeout，最后才校验）；而微任务会在每次事件循环末尾统一清空，天然具备“合并”效果——多次触发只保留最后一次校验，且能拿到最新的 DOM 值和绑定状态（如 Vue/React 的响应式更新已完成）。
基础实现：防抖式微任务队列
关键不是“防抖”，而是“去重+延迟执行”。每次输入都尝试调度一次微任务，但只让最后一次生效：
- 用一个布尔标志
pending标记当前是否有待执行的校验 - 每次输入时，若
pending === false，则设为true并调度微任务 - 微任务中执行校验，并重置
pending = false
示例代码：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
let pending = false;
const form = document.querySelector('#myForm');
const checkDirty = () => {
// 读取当前所有字段值，对比初始快照或上一次干净状态
const isDirty = Array.from(form.elements).some(el =>
el.value !== el.dataset.initialValue
);
console.log('表单是否脏：', isDirty);
};
const scheduleCheck = () => {
if (!pending) {
pending = true;
queueMicrotask(() => {
checkDirty();
pending = false;
});
}
};
form.addEventListener('input', scheduleCheck);
form.addEventListener('change', scheduleCheck);
配合初始化快照与自动绑定
脏检查依赖“原始值”作为基准。建议在表单加载后立即保存初始状态：
- 遍历
form.elements，对每个可交互元素（input、textarea、select）读取.value或.checked，存入dataset.initialValue或独立 Map - 对于动态添加的字段，需在插入 DOM 后手动调用初始化逻辑
- 若使用框架（如 React），应在
useEffect或componentDidMount中初始化快照，校验时通过 ref 获取真实 DOM 值
进阶：支持手动触发与状态同步
微任务队列应允许外部干预：
- 提供
forceCheck()方法：直接执行校验，不走队列（用于提交前强制校验） - 提供
reset()方法：重置pending、更新所有dataset.initialValue，并标记为“干净” - 校验结果可触发自定义事件（如
form:dirty、form:clean），便于 UI 同步（如启用/禁用保存按钮）
例如：
const formState = {
pending: false,
snapshot: new Map(),
init() {
form.elements.forEach(el => {
this.snapshot.set(el, el.value || el.checked || '');
});
},
check() {
let dirty = false;
for (const [el, initial] of this.snapshot) {
const current = el.value || el.checked || '';
if (current !== initial) {
dirty = true;
break;
}
}
form.dispatchEvent(new CustomEvent(dirty ? 'form:dirty' : 'form:clean'));
},
schedule() {
if (!this.pending) {
this.pending = true;
queueMicrotask(() => {
this.check();
this.pending = false;
});
}
},
forceCheck() {
this.check();
},
reset() {
this.init();
this.forceCheck();
}
};
formState.init();
form.addEventListener('input', () => formState.schedule());
不复杂但容易忽略：微任务本身不解决性能问题，它只是调度时机更优；真正减少开销靠的是“只校验变化后的一次”和“用 dataset 缓存初始值避免重复读取 DOM”。
