防抖和节流
一、防抖和节流是什么
本质上是优化高频率执行代码的一种手段,
如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能
为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(防抖)和debounce(节流)的方式来减少调用频率
防抖:单位时间内,频繁触发事件,只执行最后一次
代码思路是利用定时器,每次触发先清掉以前的定时器 (从新开始)
应用场景
搜索框搜索输入
文本编辑器实时保存
实现简单的防抖代码如下:
节流: 单位时间内,频繁触发事件,只执行一次
就是指连续触发事件但是在设定的一段时间内中 只执行一次函数例如: 设定1000毫秒执行,那你在1000毫秒触发在多次,也只在1000毫秒后执行一次
记忆方法: 不要打断我
实现简单的节流代码如下:
应用场景
高频事件 例如 快速点击、鼠标滑动、resize 事件、scroll 事件
下拉加载
视频播放记录时间等