节流与防抖的区别
能够说出节流与防抖的区别
相同点
节流与防抖都是属性性能优化方案
都是减少事件触发的频繁，从而提高页面的性能
不同点
节流：单位时间内，频繁触发事件，只执行一次
防抖：单位时间内，频繁触发事件，只执行最后一次
应用场景不同：
- 节流主要用于高频事件
mousemove、scroll等等 - 防抖主要用于搜索框
input -
使用lodash库实现节流和防抖
能够使用lodash 库 实现节流和防抖
问题导入
封装节流与防抖函数是不是很麻烦？
能否有更加简洁高效的方法呢？
可以使用lodash 库 提供的节流和防抖方法来实现节流与防抖的功能
步骤
- 引入
lodash库 - 使用
throttle方法实现节流 - 使用
debounce方法实现防抖
示例代码
- 节流
防抖
节流综合案例-ontimeupdate事件
能够给视频注册ontimeupdate事件
节流综合案例素材
什么是ontimeupdate事件
ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。
该事件通常与 Video 对象的 currentTime 属性一起使用， 该属性返回视频/音频（audio/video）的当前播放位置。
需求
获取视频的播放时间
步骤
- 获取
video元素 - 注册
ontimeupdate事件 - 获取当前播放的时间
节流综合案例-利用节流函数存储本地时间
能够利用节流函数存储本地时间
问题导入
ontimeupdate ， 触发频次太高了，我们可以设定 1秒钟触发一次
将播放的时间存储到本地存储中
可以利用节流来实现
步骤
- 引入
lodash库 - 使用
throttle方法实现节流 - 将播放的时间存储到本地存储中
节流综合案例-视频跳转到上次播放的时间
目标#
刷新浏览器后，能够实现视频跳转到上次播放的时间
如何实现刷新浏览器后，能够实现视频跳转到上次播放的时间
可以利用onloadeddata事件
onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发
需求
刷新浏览器后，能够实现视频跳转到上次播放的时间
步骤
- 给
video元素注册onloadeddata事件 - 从本地存储里面取出记录的时间， 赋值给 video.currentTime
