requestAnimationFrame实现浏览器动画

中文文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

来自MDN的中文文档原文：

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

语法

window.requestAnimationFrame(callback);

代码示例

<div id="app"></div>

<script>
  const app = document.getElementById('app')
  let count = 0
  let delay = 0

  function animation() {
    
    
    // 跳过某一些帧，让数字的变化能够让人眼识别
    if (delay % 50 == 0) {
    
    
      app.innerText = count
      count++
    }
    
    // 循环调用
    window.requestAnimationFrame(animation)
    delay++;
  }

  animation()
</script>

在线Demo: https://mouday.github.io/front-end-demo/requestAnimationFrame.html