JS详解-手写节流

最新推荐文章于 2025-05-30 22:51:39 发布

wangyk,C'est la vie

最新推荐文章于 2025-05-30 22:51:39 发布

阅读量189

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习总结文章标签： javascript 前端 vue.js 面试开发语言 es6

本文链接：https://blog.youkuaiyun.com/Ian1025/article/details/137400336

学习总结专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在JavaScript中使用节流技术来优化视频播放性能，通过监听loadeddata和timeupdate事件，确保视频加载完成后能正确保存播放进度，并限制timeupdate事件的频繁触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

     // 节流
        const video = document.querySelector('.video')

        // 视频加载完成时，读取并设置播放时间
        video.addEventListener('loadeddata',function(){
            video.currentTime = localStorage.getItem('currentTime') || 0
        })

        // 使用节流优化
        let timeId
        video.addEventListener('timeupdate',function(){
            if(timeId !== undefined){
                return
            }
            timeId = setTimeout(()=>{
                console.log('timeupdate!')
                localStorage.setItem('currentTime',this.currentTime)
                // 重置timeId
                timeId = undefined
            },500)
        })