防抖
应用场景举例:
输入框停止输入后,发送ajax请求进行校验。
页面滚动事件停止后判断。
代码描述:
触发后,某个时间之后开始执行,如果等待过程中再次触发,则重新开始计时。
function debounce(fn, delay) {
let timer = null
return function() {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
}
节流
应用场景举例:
leetcode 的提交代码。
射击游戏中单位时间内只能发射一颗子弹。
dom元素的拖拽功能。
代码描述:
触发后立刻执行,等待期内再次触发无效,过了等待期可以再次触发。
function throttle(fn, delay) {
let status = true
return function() {
if(status) {
fn.apply(this, arguments)
status = false
setTimeout(() => status = true, delay)
}
}
}
区别与联系
两者都在快速连续触发函数时,减少了函数的实际执行次数。
防抖是触发后等待一段时间才能执行,节流是一个时间段内只能执行一次。
参考目录
JavaScript 函数节流和函数去抖应用场景辨析 · Issue #20 · lessfish/underscore-analysis