函数节流和函数防抖两者都是优化高频率执行js代码的一种手段。
函数节流
- 概念：
在一定时间内，不管事件触发几次，js方法只执行一次 - 实现原理：
setTimeout()，控制状态的锁 - 场景：
用户点击按钮打印“你好！”，并且在点击按钮后3秒后才能再打印，期间用户点击打印不会执行打印“你好！” - 代码实现：
let flag = true // 设置节流的锁
const throttle = (fn, delay = 500) => {
if (flag) {
// 当锁是打开时，执行对应方法
fn() // 执行对应方法
flag = false // 将锁关闭，锁关闭时，不进入if
setTimeout(function () {
flag = true // 将锁打开，锁打开时，进入if
}, delay)
}
}
document.getElementById('aaa').onclick = () => {
throttle(function () {
console.log('节流')
})
}
函数防抖
- 概念：
事件触发后，需要等待一定时间后js方法才会执行。如果事件再次触发，则取消上一次的延迟操作，重新对延迟的时间进行计时。 - 实现原理：
setTimeout()与clearTimeout() - 场景：
在搜索时，在接受用户输入内容的300毫秒后，执行请求函数； - 代码实现：
let timer
const debounce = (fn, delay) => {
clearTimeout(timer) // 清除上一次还未执行的定时器
timer = setTimeout(function () {
fn()
}, 500)
}
document.getElementById('bbb').onclick = () => {
debounce(function () {
console.log('防抖')
})
}
