js 防抖 节流

防抖与节流  都适合什么场景

防抖   防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。

场景：

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存

function debounce (f, wait) {

let timer ;

return (...args) => {

clearTimeout(timer)

timer = setTimeout(() => {

f(...args)

}, wait)

}

}

防抖重在清零 clearTimeout(timer)

节流   控制事件发生的频率

场景：

1. scroll 事件，每隔一秒计算一次位置信息等

2. 浏览器播放事件，每个一秒计算一次进度信息等

3. input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

function throttle (f, wait) {

let timer ；

return (...args) => {

if (timer) { return }

timer = setTimeout(() => {

f(...args)

timer = null }, wait)

}

}

节流重在开关锁 timer=null

• 防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout

• 节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null