1.用requestAnimationFrame代替setInterval定时器
优点：
1.requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘
2.充分利用显示器的刷机机制，节省系统系统资源。
3.requestAnimationFrame启动动画，默认返回一个id,cancelAnimationFrame只需要传入这个id就可以停止了。
demo1:进度条
<div style="width: 0px; height: 12px; line-height: 12px; background: pink">
0%
</div>
<script>
var div = document.querySelector("div");
div.onclick = function () {
var timer = requestAnimationFrame(function fn() {
if (parseInt(div.style.width) < 300) {
div.style.width = parseInt(div.style.width) + 3 + "px";
div.innerHTML = parseInt(div.style.width) / 3 + "%";
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
}
});
};
// requestAnimationFrame如何停止动画：cancelAnimationFrame()只接受一个参数，
// requestAnimationFrame 默认返回一个id,cancelAnimationFrame只需要传入这个id就可以停止了。
// requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
// 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
// 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
</script>
效果：点击出现一个进度条
image.png
demo2:直线运动，用requestAnimationFrame和cancelAnimationFrame替代定时器的设置
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#e {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
zoom: 1;
}
</style>
</head>
<body>
<div id="e"></div>
<script>
var e = document.getElementById("e");
var flag = true;
var left = 0;
function render() {
if (flag == true) {
if (left >= 500) {
flag = false;
}
e.style.left = ` ${left++}px`;
} else {
if (left <= 0) {
flag = true;
}
e.style.left = ` ${left--}px`;
}
}
// 方法1
// setInterval(function () {
// render();
// }, 1000 / 60);//1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧
// 方法2
// requestAnimationFrame效果
// (function animloop() {
// render();
// window.requestAnimationFrame(animloop);
// })();
// requestAnimationFrame如何停止动画：cancelAnimationFrame()只接受一个参数，
// requestAnimationFrame 默认返回一个id,cancelAnimationFrame只需要传入这个id就可以停止了。
// 方法2，让动画停止
(function animloop(time) {
// console.log(time,Date.now())
render();
rafId = requestAnimationFrame(animloop);
//如果left等于50 停止动画
// if (left == 300) {
// cancelAnimationFrame(rafId);
// }
})();
// requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
// 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
// 2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
</script>
</body>
</html>
