透过现象看本质:防抖函数和节流函数
(一)防抖(debounce)
1. 思想
「抖」是振动的意思,振动是指一个状态改变的过程。「防抖」实际上防的是物体状态在短时间内发生快速变化。在 Web 前端开发领域,即是防止浏览器在短时间内多次计算元素属性,本质上,是为了节省浏览器计算资源。在与服务器交互场景中,也可以起到节省带宽,服务器压力的作用。
「防抖函数」的核心原理是,延迟函数执行,若在延迟期间,函数被调用,则继续延迟直至无函数调用为止,其表现为函数仅被调用一次。状态只存在从 0 到 1,从初始值到结果值的变化,因此不存在频繁的抖动。
假设一个人不断的接收命令采取行动,防抖思想则是让这个人在接收完所有命令前,不要采取任何行动,当命令结束一定时间后(确认没有新的命令),统一采取行动。
2. 实现
核心代码
const debounce = (fn, delay) => {
let timer = null
return (...args) => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn(...args)
}, delay)
}
}
3. 使用场景
- 输入框输入即时发送请求;
- 浏览器 resize 回调;
- 滚动条滚动回调;
(二)节流(throttle)
1. 思想
「节」是节约的意思,而「流」在开发领域中即是计算,节流的核心目的与防抖相同:节省计算机计算资源。但是在思想上则不如防抖函数那么「激进」,只让函数执行一次。节流函数允许函数被频繁触发,但是触发频率不是由用户决定,而是由开发者限定触发时间间隔。
同样假设一个人不断的接收命令采取行动,节流思想则是让这个人每过一段时间,行动一次,在两次行动之间的间隔内,不采取任何行动。
2. 实现
const throttle = (fn, delay) => {
let execute = true
return (...args) => {
if (!execute) return
execute = false
setTimeout(() => {
fn(...args)
execute = true
}, delay)
}
}
3. 使用场景
- mousemove 事件
- 按照滚动距离加载元素;
👋 Hey!喜欢这篇文章吗?别忘了在下方👇 投票让我知道。