防抖的应用演示,持续的事件触发停止时,执行最后一次
节流的应用演示,持续的事件触发,每隔一段相同的事件触发一次


防抖和节流的演示代码已上传至Incode,可以直接从文章顶部去运行
防抖节流
- 防抖(
debounce
)和节流(throttle
)都是性能优化的手段,减少资源消耗,提高代码性能 - 防抖其实就是当事件持续触发的时候,只执行事件停止触发后的最后一次事件
- 节流与防抖类似,节流是当事件持续触发的时候,每隔相同的一段事间触发一次
防抖(debounce
)
在同一时间内,连续触发事件,只处理最后一次,这样可以减少计算机算力的消耗,优化性能
防抖的主要应用场景:
- 输入框实时搜索:当用户在输入框中输入时,你可能希望只有在用户停止输入一段时间后再执行搜索,而不是每次用户键入字符就执行搜索,这样可以减少不必要的计算和网络请求。
- 窗口调整事件:当用户调整窗口大小时,你可能希望只有在窗口大小停止变化后的一段时间内重新计算布局,而不是每次窗口大小发生变化就重新计算,这样可以提高性能。
实现思路:
- 当事件发生,不立即执行事件回调。用定时器定个时间,在事件停止触发后一段时间后才去触发(延迟触发事件)
- 再次触发事件,先取消上次的定时器,再重新开启一个定时器(重新刷新定时器的时间)
创建一个防抖函数debounce
// 创建一个防抖函数
function debounce(fn, time) {
let setId // 定义一个计时器变量,接收定时器,可以用来清楚定时器
return function () {
clearTimeout(setId) // 如果在规定时间内再次输入,则清除上一次计时器
setId = setTimeout(function () {
fn() // 等待规定时间后执行函数
}, time)
}
}
防抖函数创建完成,接下来就是来个简单的演示,完整代码如下
<styl