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);
}
});