手写Vue里的nextTick方法

最新推荐文章于 2024-05-07 04:09:49 发布

制冷男孩

最新推荐文章于 2024-05-07 04:09:49 发布

阅读量393

点赞数

文章标签： typescript

本文链接：https://blog.youkuaiyun.com/QingHan_wow/article/details/111291256

版权

该博客探讨了如何利用TypeScript编写一个异步任务调度器，它使用微任务和宏任务确保回调函数的正确执行。核心功能包括将回调函数加入队列并在适当的时间调用它们，通过Promise或setTimeout来控制任务的执行顺序。这个实现对于理解JavaScript事件循环和异步编程具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用的typescript

const callbacks: Array<Function> = []
let pending = false

const flushCallbacks: Function = (): void =>{ 
   pending = false;
   if(callbacks && callbacks.length!==0){
     const eventList: Array<Function> = [...callbacks];
     callbacks.length = 0;
     eventList.forEach(func=>{
         func()
     })
   }
}

const timeFunc: Function = (): void =>{
    if(typeof Promise !== 'undefined'){ // 走微任务
      Promise.resolve().then(()=>{
          flushCallbacks()
      })
    }else{ // 走宏任务
      setTimeout(() => {
          flushCallbacks()
      }, 0);
    }
}

export const nextTick: Function = (cb: Function): void=>{
   if(cb){
       callbacks.push(()=>{
           cb()
       })
   }
   if(!pending){
       pending = true
       timeFunc()
   }
}