防抖(debounce)
常用于频繁输入、频繁操作的时候,最后的时候才去触发
1.封装函数
function debounce(fn, delay = 500) {
// timer是闭包中的
let timer = null
return function () {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
2.使用示例
input1.addEventListener('keyup', debounce(() => {
console.log(input1.value);
}, 600))
节流(throttle)
常用于频繁输入、频繁操作的时候,保持一个频率连续触发
1.封装函数
function throttle(fn, delay = 500) {
let timer = null
return function () {
if (timer) {
return
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
2.使用示例
div1.addEventListener('drag', throttle((e)=>{
console.log(e.offsetX, e.offsetY);
},200));