一、防抖debounce（多次触发 只执行最后一次）
- 作用：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
- 类似于回城8秒，如果回城中被打断，再次回城需要再等8秒
- 应用场景：搜索提示；搜索时不断输入，用防抖来节约请求资源
<body>
<input type="text">
<script>
function debounce(callback, delay) {
let timer
return function () { // 闭包
clearTimeout(timer) // 清除上次的timer
timer = setTimeout(() => {
callback(...arguments)
}, delay)
}
}
function say_hello(str) { // 事件触发函数
console.log(str);
}
const new_say_hello = debounce(say_hello, 1000) // 重构事件触发函数
const input = document.querySelector('input')
input.addEventListener('keyup', e => {
new_say_hello(e.target.value)
})
</script>
</body>
二、防抖throttle（规定时间内 只触发一次）
- 作用：限定事件在一定时间内只能执行一次
- 节流类似于平A,受攻速的限制
- 应用场景：监听滚动条滚动加载数据，即边滚动边加载;鼠标多次点击只触发少次
<body>
<button>点击</button>
<script>
function throttle(callback, delay) {
let timer // 节流阀
return function () { // 闭包
if (!timer) {
timer = setTimeout(() => {
callback(...arguments)
timer = null // 回调函数执行完放开节流阀
}, delay)
}
}
}
function say_hello(str) {
console.log(str);
}
const new_say_hello = throttle(say_hello, 1000)
const btn = document.querySelector('button')
btn.addEventListener('click', e => {
new_say_hello('点击了')
})
</script>
</body>
参考一
参考二