RequestAnimationFrame 不会停止记录

Question

let stopId;

const playVideo = () =>{
    if(isPlaying){
        videoRef.current.pause()
        window.cancelAnimationFrame(stopId)
    }else{
        videoRef.current.play();
        window.requestAnimationFrame(calcTime)
    }
    setIsPlaying(!isPlaying)
}

const calcTime = () =>{
    stopId = window.requestAnimationFrame(calcTime)
    console.log('hey')
}

这是针对视频播放器的导引头 animation。 当我注意到尽管暂停了视频它也不会停止记录时，我正在控制台记录一些东西。 搜寻器 animation 已停止，但日志仍在继续。

我尝试的另一件事是：

const calcTime = () =>{           
    stopId = window.requestAnimationFrame(calcTime)
    console.log('hey')
    setTimeout(() => {
        videoRef.current.pause()
        window.cancelAnimationFrame(stopId)
        console.log('pause')
    }, 5000);
}

这将在停止之前记录“嘿”300 次，然后在停止之前记录“暂停”300 次。 我对发生的事情很困惑。 这是否意味着视频暂停时请求仍在发生并且会出现性能问题？

Answer 1

我现在明白我的问题了。 因为我使用的是 React，所以只要 state 发生变化， stopId就会被破坏。 所以我给它附加了一个 useRef 并设置stopId.current = window.requestAnimationFrame(calcTime)现在它正确地停止了