requestAnimationFrame

最新推荐文章于 2024-06-29 21:30:00 发布

huruiDD

最新推荐文章于 2024-06-29 21:30:00 发布

阅读量154

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_38551805/article/details/115702374

版权

js javascript

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

requestAnimationFrame() // 调用串联起来，就像以前使用setTimeout()时一样：
    function updateProgress() {
    var div = document.getElementById("status");
    div.style.width = (parseInt(div.style.width, 10) + 5) + "%";
    if (div.style.left != "100%") {
        requestAnimationFrame(updateProgress);
    }
}
requestAnimationFrame(updateProgress);
//  因为requestAnimationFrame()只会调用一次传入的函数，所以每次更新用户界面时需要再手
//  动调用它一次。同样，也需要控制动画何时停止。结果就会得到非常平滑的动画。

//  与setTimeout()类似，requestAnimationFrame()也返回一个请求ID，可以用于通过另一个方法cancelAnimationFrame()来取消重绘任务。下面的例子展示了刚把一个任务加入队列又立即将其取消：
let requestID = window.requestAnimationFrame(() => {
    console.log('Repaint!');
});
window.cancelAnimationFrame(requestID);

// 通过requestAnimationFrame 节流

let enabled = true;
function expensiveOperation() {
    console.log('Invoked at', Date.now());
}
window.addEventListener('scroll', () => {
    if (enabled) {
        enabled = false;
        window.requestAnimationFrame(expensiveOperation);
        window.setTimeout(() => enabled = true, 50);
    }
});