246 字
1 分钟
微任务缓冲队列

微任务的缓冲队列,就是为了解决很多重复执行的场景,避免某个任务的重复执行造成性能的开销问题,包括 Vue 中的副作用更新任务,都是采用微任务队列进行缓冲

// 任务缓存队列,用Set数据结构表示
// 这样可以保证同一个任务执行多次的时候,Set中存入的永远都是唯一的
cont queue = new Set();
// 标记,表示是否正在刷新队列
let isFlushing = false;
// 创建一个立即resolve的Promise实例
const p = Promise.resolve();
// 添加任务的函数,在Vue中可以作为effect的调度器
function queueJob(job){
// 将job添加到任务队列的queue上
queue.add(job)
// 如果还没有开始刷新队列,则刷新之
if(!isFlushing){
// 将此设置为true
isFlushing = true
p.then(()=>{
try{
// 执行任务队列中的任务
queue.forEach((queueJob)=> queueJob())
} finally {
// 重制状态
isFlushing = false;
queue.length = 0
}
})
}
}
微任务缓冲队列
https://nollieleo.github.io/posts/微任务缓冲队列/
作者
翁先森
发布于
2023-02-02
许可协议
CC BY-NC-SA 4.0