requestAnimationFrame()函数保姆式讲解

        今天遇到requestAnimationFrame()函数；有很多疑问，它是不是会像循坏调用一样，调用它的回调函数？

      上代码，来解析；（代码来自百度找的案例--requestAnimationFrame简单用法_requestanimationframe用法_胜玲龙的博客-CSDN博客）;

   

let a = aaa;
    let flag = true;
    let left = 0;
    function renders() {
        if(flag){
            left >= 100 && (flag = false)
            a.style.left = ` ${left++}px`
        } else {
            left <= 0 && (flag = true)
            a.style.left = ` ${left--}px`
        }
    }

    //requestAnimationFrame效果
    (function animateloop() {
        renders();
        window.requestAnimationFrame(animateloop);
    })();

MDN:是这样解释的

     window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行;

   初见上面的代码，由于我浅薄的见解，认为window.requestAnimationFrame(animateloop)--就像宏任务setTimout()一样在一定的时间重复调用它的回调函数

    所以有以下测试

      

  function renders() {

            if (flag) {

                left >= 100 && (flag = false)

                a.style.left = ` ${left+=100}px`

            } else {

                left <= 0 && (flag = true)

                a.style.left = ` ${left--}px`

            };

        }

        window.requestAnimationFrame(renders);

       发现--函数仅仅被调用一次；（排除window.requestAnimationFrame()和setTimeout一样的想法）；

    然后在某个博客上看到如下一句话：

      注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()；

    这就让我恍然大悟----结合概念:requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。;

    我对上面的代码的理解就是，window.requestAnimationFrame(x)；它不会像setTimeout();那样循环自己，window.requestAnimationFrame()的循环式通过递归进行的；；它的核心就是概念说的---requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。;

   原来是刚开始就理解有偏差了，！！！！

  对于更加详细的requestAnimationFrame()函数的使用可以参考博客：requestAnimationFrame简单用法_requestanimationframe用法_胜玲龙的博客-CSDN博客