无线循环函数requestAnimationFrame

最近在看canvas的时候接触到的这个函数，既然setInterval可以搞定为啥还要用requestAnimationFrame呢？
所以搜索相关问题发现以下两点优势：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

有循环自然有停止的方法：cancelAnimationFrame()

cancelAnimationFrame()接收一个参数 requestAnimationFrame默认返回一个id，cancelAnimationFrame只需要传入这个id就可以停止了

上代码：

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<span id="text"></span> <!-- 查看坐标变化 -->
<script>
var c=document.getElementById("myCanvas");
var x1 = 5,
    mx1 = 0,
    mx2 = 400
    
var ctx=c.getContext("2d");
    
function moveArc() {
    mx1 += x1
    mx2 -= x1
    
    ctx.beginPath();
    ctx.moveTo(0,100)
    ctx.arc(mx1, 100, 5, 0, 2*Math.PI, false)
    ctx.moveTo(400,100)
    ctx.arc(mx2, 100, 5, 0, 2*Math.PI, false)
    ctx.fill();
    
    document.getElementById("text").innerHTML = mx1
}   
    
(function animloop() {
    ctx.clearRect(0, 0, 400, 200)
    moveArc();
    rafId = requestAnimationFrame(animloop);
        
    //如果mx大于400 停止动画
    if(mx1 > 400){
        cancelAnimationFrame(rafId)
        mx1 = 0
        mx2= 400
        animloop();
    }
})();
</script>