requestAnimationFrame正计时
时间: 2023-12-21 12:32:18 浏览: 31
requestAnimationFrame是浏览器提供的一个接口,用于按帧对网页进行重绘。它可以用来实现动画效果或者其他需要定时循环操作的功能。相比于setTimeout和setInterval,requestAnimationFrame有以下几个优点:
1. 与屏幕刷新率同步:requestAnimationFrame会根据浏览器的刷新率来调用回调函数,通常为每秒60次。这样可以确保动画的流畅性,并且避免了过度绘制。
2. 自动暂停:当页面处于非激活状态时,requestAnimationFrame会自动暂停,节省了CPU资源。
3. 减少功耗:由于requestAnimationFrame的调用次数与屏幕刷新率相匹配,因此可以减少不必要的绘制,降低了功耗。
下面是一个使用requestAnimationFrame实现正计时的示例:
```javascript
let startTime;
function step(timestamp) {
if (!startTime) {
startTime = timestamp;
}
const elapsedTime = timestamp - startTime;
const seconds = Math.floor(elapsedTime / 1000);
const milliseconds = elapsedTime % 1000;
console.log(`已经过去了 ${seconds} 秒 ${milliseconds} 毫秒`);
requestAnimationFrame(step);
}
requestAnimationFrame(step);
```
这段代码会在控制台输出从开始运行到现在的时间,以秒和毫秒为单位。每次调用step函数时,requestAnimationFrame会传入一个时间戳作为参数,可以用来计算经过的时间。通过不断调用requestAnimationFrame,可以实现一个持续更新的计时器。