requestAnimationFrame 模拟写出setTimeout,setInterval

418 阅读1分钟

模拟实现setTimeout

 // 维护个定时器ID集合
 const timerList = new Set();
 function setTimeout(fn,delay){
    // 记录当前时间
    const last = new Date().getTime();
    function start(){
      requestAnimationFrame(()=>{
           // 判断定时器是否被外部清除
           if(!timerList.has(id)) return;
           // 记录每次浏览器刷新时间
           const now = new Date().getTime();
           // 判断是否超出延迟时间
           if(now - last >= delay){
               // 顺利执行定时器并删除定时器标识ID
               fn();
               timerList.delete(id);
               return
           }
           start();
      })
    }
    start();
    // 生成唯一标识可以让外部控制是否停止定时器
    const id = Symbol();
    timerList.add(id);
    return id
 }
 // 外部清楚定时标识ID
 function clearTimeout(id){
   timerList.delete(id);
 }

模拟实现setInterval

 // 维护个定时器ID集合
 const timerList = new Set();
 function setInterval(fn,delay){
    // 记录当前时间
    let last = new Date().getTime();
    function start(){
      requestAnimationFrame(()=>{
           // 判断定时器是否被外部清除
           if(!timerList.has(id)) return;
           // 记录每次浏览器刷新时间
           const now = new Date().getTime();
           // 判断是否超出延迟时间
           if(now - last >= delay){
               // 顺利执行定时器并删除定时器标识ID
               fn();
               last = now;
           }
           start();
      })
    }
    start();
    // 生成唯一标识可以让外部控制是否停止定时器
    const id = Symbol();
    timerList.add(id);
    return id
 }
 // 外部清楚定时标识ID
 function clearInterval(id){
   timerList.delete(id);
 }
  • 第一次写文章,有什么不对的欢迎大家积极指点。