requestAnimationFrame

window.requestAnimationFrame（callback）
window.cancelAnimationFrame(animationId)

应用场景

​ 音视频、拖拽，可以当成一个16ms的截留函数使用

自定义滚动

有时候滚动插件无法满足需求就需要自己写一下滚动，下面这个是可以自动滚动，到底部返回第一条，鼠标也可滚动

export const autoScroll = (selectName, e) => {
  const tableBody = document.querySelector(selectName)
  window.requestAnimationFrame(() => callBack(tableBody, e))
  setHover(selectName, e)
}
const callBack = (tableBody, e) => {
  if (e.isScroll) {
    if (tableBody.scrollHeight - tableBody.scrollTop <= tableBody.clientHeight + 1) {
      e.toTop = 0
      tableBody.scrollTop = e.toTop
    } else {
      e.toTop += 0.5
      tableBody.scrollTop = e.toTop
    }
  }
  window.requestAnimationFrame(() => callBack(tableBody, e))
}
const setHover = (selectName, e) => {
  document.querySelector(selectName).addEventListener('mouseenter', () => {
    e.isScroll = false
  })
  document.querySelector(selectName).addEventListener('mouseleave', () => {
    e.toTop = document.querySelector(selectName).scrollTop
    e.isScroll = true
  })
}

缺点：

​ 只会在当前页面激活时被触发，所以不论是切换浏览器页面还是切换到其他的程序，都不会被激活，在一些有严格要求的动画中，会导致丢帧的情况。解决这种丢帧问题的方法，一般会采用监听visibilitychange事件，当用户离开当前页面时，我们记录离开的时间戳，当用户再次回到页面时，我们利用记录的时间戳计算用户离开页面的时间，并计算出在这段时间内丢失的动画状态，同时将动画状态进行补偿，这样就可以解决丢帧的问题了。