JS详解-手写节流

Ian1025

于 2024-04-07 06:30:00 发布

阅读量123

点赞数 2

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

本文链接：https://blog.csdn.net/Ian1025/article/details/137400336

版权

学习总结专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

     // 节流
        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)
        })