防抖
原理:
当事件被触发 n 秒后再执行回调,如果在 n 秒内又被触发,则重新计时。
使用场景:
频繁触发按钮点击事件、input框搜索等等。
一个搜索输入框, 用户不停的进行输入(这个时候就是抖动的过程), 等用户输入停止之后,再触发搜索
// 防抖(一定时间内触发多次,会取消中间的多次触发,只执行最后一次触发)
export const debounce = (func, wait) => {
let delay = wait || 500;
let timer;
return () => {
const _this = this;
let args = arguments;
// 防抖与节流关键代码行
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(_this, args)
timer = null
}, delay)
}
}
节流
原理:
规定在一个单位时间内只能触发一次函数,如果在单位时间内触发多次,只执行一次。比如两秒内的点击事件,无论点多少次,两秒内只执行一次。
使用场景:
下拉加载更多(无限滚动)事件、浏览器的resize,scroll事件等等
// 节流(单位时间内执行一次。时间内触发多次,只执行一次。即每隔一段时间执行一次)
export const throttle = (func, wait) => {
let delay = wait || 500;
let timer;
return () => {
const _this = this;
let args = arguments;
// 节流与防抖关键代码行
if (timer) {
return
}
timer = setTimeout(() => {
func.apply(_this, args)
timer = null
}, delay)
}
}