• 想要动画流程，更新频率要60帧每秒，即16.67ms更新一次视图
    • setTimeout要手动控制频率，而RAF浏览器会自动控制
    • 后台标签或隐藏iframe中，RAF会暂停，而setTimeout依然执行

    https://code.h5jun.com/caze/40/edit?html,js,console,output

    1. let div1 = document.querySelector('.div1')
    2. let div2 = document.querySelector('.div2')
    5. // 180px  3m 180帧
    7. function fun1(){
    8.   console.log(div1.style.width);
    9.   let width = div1.offsetWidth+1;
    10.   div1.style.width = width+'px';
    11.   if(width<230){
    12.     setTimeout(fun1,16.7) // 自己控制时间
    13.   }
    14. }
    16. fun1()
    18. function fun2(){
    19.   console.log(div1.style.width);
    20.   let width = div2.offsetWidth + 1;
    21.   div2.style.width = width+'px';
    22.    if(width < 230){
    23.    window.requestAnimationFrame(fun2); //不用自己控制时间
    24.   }
    25. }
    27. fun2()