requestAnimationFrame的简单使用

requestAnimationFrame

语法：

requestAnimationFrame(callback)

requestAnimationFrame()方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。每次调用requestAnimationFrame()都会在事件队列上推入一个回调 函数，队列的长度没有限制。

cancelAnimationFrame() 取消任务

刷新频率：一般计算机显示器的屏幕刷新率都 是60Hz，基本上意味着每秒需要重绘60次。大多数浏览器会限制重绘频 率，使其不超出屏幕的刷新率，这是因为超过刷新率，用户也感知不 到。

1 通过requestAnimationFrame节流

let requestID = window.requestAnimationFrame(() => {
    console.log('Repaint!');
});
//取消
// window.cancelAnimationFrame(requestID);

2 解决setInterval()和setTimeout()的不精确

• IE8及更早版本的计时器精度为15.625毫秒；
• IE9及更晚版本的计时器精度为4毫秒；
• Firefox和Safari的计时器精度为约10毫秒；
• Chrome的计时器精度为4毫秒。

mySetTimeout 2秒后输出

function mySetTimeout(callback, time = 3000) {
    let startTime;
    let timer = null;
    // currentTime  表示下次重绘的时间。
    function animate(currentTime) {
        if (!startTime) {
            startTime = currentTime;//记录步数，每个浏览器不一样
        }
        const elapsedTime = currentTime - startTime;
        if (elapsedTime < time) {
            timer = requestAnimationFrame(animate);
            console.log("timer", timer)
        } else {
            callback();
        }
    }
    timer = requestAnimationFrame(animate);

    function cancel() {
        window.cancelAnimationFrame(timer);
    }
    return cancel;
}
let cancel = mySetTimeout(() => {
    console.log('来啦来啦')
}, 2000);
// 取消 
setTimeout(() => {
    cancel();
}, 1000);

mySetInterval 1秒间隔输出

function mySetInterval(callback, time = 3000) {
    let startTime;
    // currentTime  表示下次重绘的时间。
    let timer = null;
    function animate(currentTime) {
        if (!startTime) {
            startTime = currentTime;//记录步数，每个浏览器不一样
        }
        const elapsedTime = currentTime - startTime;
        if (elapsedTime < time) {
            timer = requestAnimationFrame(animate);
        } else {
            callback();
            timer = requestAnimationFrame(animate);
            startTime = currentTime;
        }
    }
    // 取消重绘
    function cancel() {
        window.cancelAnimationFrame(timer);
    }
    timer = requestAnimationFrame(animate);
    return cancel;
}
let cancel = mySetInterval(() => {
    console.log('来啦来啦')
}, 1000);
// 取消 
// window.cancelAnimationFrame(timer);
setTimeout(() => {
    cancel();
}, 5000)