1.防抖
- 原理
防抖是指在规定时间后只执行一次,每次点击时间重新开始计算 - 代码实现
function debounce(fn, delay = 500) {
let timer = null;
return function() {
let args = arguments
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
- 应用场景
(1)scroll事件滚动触发
(2)搜索框输入查询
(3)表单提交
(4)浏览器窗口缩放,resize事件
2.节流
- 原理
持续触发事件时,每隔一段事件只执行一次 - 代码实现
function throttle(fn, delay) {
let timer = null
let prev = 0
return function() {
let args = arguments
let now = Date.now()
clearTimeout(timer)
if (now - prev >= delay) {
fn.apply(this, args)
prev = Date.now()
} else {
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
}
- 应用场景
input试试输入查询