Skip to main content

模拟定时器

模拟定时器​

模拟setTimeout​

const mockSetTimeOut = (cb,time = 0) =>{
   let t = 0;
   let timer = () => {
        t += 1;
        if ((t * (1000 / 60)) > time) {
          cb();
          cancelAnimationFrame(timer);
        } else {
          requestAnimationFrame(timer);
        }
    }
    requestAnimationFrame(timer);
}
mockSetTimeOut(()=> {
  console.log('1s后');
}, 1000)

模拟setInterval​

const mockSetInterval = (cb,time = 0) => {
    let t = 0;
    let timer = () => {
        t += 1;
        requestAnimationFrame(timer);
        if ((t * (1000 / 60)) > time) {
          t = 0;
          cb();
        }
    };
    requestAnimationFrame(timer);
}
let a = 0;
mockSetInterval(()=> {
  a+= 1;
  console.log(`${a}s后`);
}, 1000)

清除定时器​

function animate(cb,time){
    let myReq;    // 记录requestAnimationFrame的返回值
    let i = 1;    // 记录requestAnimationFrame的执行次数（屏幕刷新次数）
    myReq = requestAnimationFrame(function fn(){    // 开启初始requestAnimationFrame
        // 计数器 % (60/一秒钟执行的次数)
        if(i%parseInt(60/(1000/time)) == 0){
            cb();    // 执行真正要做的事情
        }
        i++;    // 记录requestAnimationFrame执行的次数
        myReq = requestAnimationFrame(fn);    // 开启下次requestAnimationFrame
        window.myReq = myReq;    // 将requestAnimationFrame返回值暴露，方便清除
    });
}

// 测试
animate(function(){
    console.log("自己封装了个计时器，好厉害呀");
}, 1000);    // 自定义执行时间
document.onclick = function(){
    // 主动控制清除动画
    cancelAnimationFrame(myReq);
}

链接​

优秀文章：