调用window.requestAnimationFrame(step);传入一个回调函数，回调函数接收到一个动画触发时间，在回调函数里可以再次调用window.requestAnimationFrame(step);
    它是一个宏任务，但是相较于其他平行宏任务的执行时间不确定

    1. <body>
    2.   <div id="box"></div>
    3.   <button onclick="handleToggle()">toggle</button>
    4.   <script>
    5.     const element = document.getElementById('box');
    6.     let start;
    7.     let r = true
    9.     function handleToggle() {
    10.       r = !r
    11.       console.log(r);
    12.     }
    14.     function step(timestamp) {
    15.       if (start === undefined)
    16.         start = timestamp;
    17.       const elapsed = timestamp - start;
    19.       //这里使用`Math.min()`确保元素刚好停在 200px 的位置。
    20.       element.style.transform = `rotate(${elapsed * 1}deg)`
    21.       // element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';
    23.       // if (elapsed < 2000) { // 在两秒后停止动画
    24.       //   window.requestAnimationFrame(step);
    25.       // }
    26.       if (r) {
    27.         window.requestAnimationFrame(step);
    28.       }
    29.     }
    31.     window.requestAnimationFrame(step);
    32.   </script>
    33. </body>