- requestAnimationFrame优化动画
- 总结：
- requestAnimationFrame与setInterval的区别
- setInterval是在任务队列里执行的，也就是说 上一帧没有执行完下一帧不可能执行。
- 而requestAnimationFrame是在差异队列里执行的，也就是说没有延迟。
- requestAnimationFrame可以准时执行每一帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main {
position: absolute;
width: 100px;
height: 100px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
// requestAnimationFrame优化动画（兼容性极差）
// requestAnimationFrame与setInterval的区别
// setInterval是在任务队列里执行的，也就是说 上一帧没有执行完下一帧不可能执行。
// 而requestAnimationFrame是在差异队列里执行的，也就是说没有延迟。
// requestAnimationFrame可以准时执行每一帧
// cancelAnimationFrame相当于clearTimeout
// 处理兼容
window.requestAnimationFrame = ((callback)=> {
return window.requestAnimationFrame || function (id) {
setTimeout(callback, 1000 / 60)
}
})();
window.cancelAnimationFrame = (()=> {
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (id) {
window.clearTimeout(id);
}
})()
let timer = null;
const move = ()=> {
console.log(1)
const square = document.getElementById("main");
if(square.offsetLeft > 700) {
cancelAnimationFrame(timer);
return;
};
square.style.left = `${square.offsetLeft + 20}px`;
timer = requestAnimationFrame(move);
}
</script>
</body>
</html>