防抖与节流（理解）

防抖与节流

防抖与节流函数是⼀种最常⽤的 ⾼频触发优化⽅式，能对性能有较⼤的帮助。 防抖 (debounce): 将多次⾼频操作优化为只在最后⼀次执⾏，通常使⽤的场景是：⽤户输 ⼊，只需再输⼊完成后做⼀次输⼊校验即可。
例如：

function debounce(fn, wait, immediate) {
let timer = null
return function() {
let args = arguments
let context = this
if (immediate && !timer) {
fn.apply(context, args)
}
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(context, args)
}, wait)
} }

节流(throttle): 每隔⼀段时间后执⾏⼀次，也就是降低频率，将⾼频操作优化成低频操作， 通常使⽤场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms 执⾏⼀次即可。

function throttle(fn, wait, immediate) {
let timer = null
let callNow = immediate
return function() {
let context = this,
args = arguments
if (callNow) {
fn.apply(context, args)
callNow = false
}
if (!timer) {
timer = setTimeout(() => {
fn.apply(context, args)
timer = null
}, wait)
}
} }