防抖(debounce)
防抖:防止抖动,单位时间内时间触发会被重置,避免事件被误伤触发多次。代码的实现重在清零clearTimeout
防抖场景:
1.登录,发短信,提交等按钮避免用户点击过快,以至于发送了多次请求,需要防抖
2.调整浏览器窗口大小时,resize次数过于频繁,造成计算过多,此时需要一步到位,就用到了防抖
3.文本编辑实时保存,当无任何更改操作一秒后进行保存
节流(throttle)
节流:控制流量,单位时间内事件只能触发一次,若这个单位时间内触发多次函数,只有一次生效。如果服务器端的限流即 Rate Limit。代码实现重在 开锁关锁 timer=timeout; timer=null
节流场景:
1. scroll 事件,每隔一秒计算一次位置信息等
2. 浏览器播放事件,每个一秒计算一次进度信息等
3. input 框实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求 (也可做防抖)
代码的实现:
防抖:设置一个定时器,通过闭包,抓住定时器变量,控制定时器的添加和删除
节流:通过一个布尔变量作为状态,判断代码是否需要执行
第一步:在utils工具文件夹下建一个utils.js文件