javascript requestAnimationFrame 解决 setTimeout、setInterval 时间不准的方法。
取代 setInterval
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<script>
let start;
function step(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
console.log("屏幕刷新时执行")
// 如果时间在两秒内
if (elapsed < 2000) { // 在两秒后停止动画
// 递归
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
</script>
</body>
</html>
取代 setTimeout
首先算好每秒的帧数,然后开始计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<script>
function fun() {
console.log("执行函数1")
console.log("执行函数2")
}
for (let i = 0; i < 100; i++) {
// 屏幕刷新一次就执行一次
requestAnimationFrame(fun)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<script>
function fun() {
console.log("执行函数")
// console.log("执行函数2")
}
function f() {
}
for (let i = 0; i < 100; i++) {
// 每 5 帧执行一次
if (i % 5 === 0) {
requestAnimationFrame(fun)
} else {
requestAnimationFrame(f)
}
}
</script>
</body>
</html>