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事件,当用户离开当前页面时,我们记录离开的时间戳,当用户再次回到页面时,我们利用记录的时间戳计算用户离开页面的时间,并计算出在这段时间内丢失的动画状态,同时将动画状态进行补偿,这样就可以解决丢帧的问题了。