防抖函数,就是一段时间内点击多次,取最后一次。
经典实现,对input输入的监听:
<input id='inp' placeholder="First name"></input>
function debounce(fn, delay = 500) {
// timer 是闭包中的
let timer = null
return function() {
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, delay)
}
}
let input1 = document.getElementById('inp')
input1.addEventListener('keyup', debounce(() => {
console.log(input1.value)
}, 2000))
节流函数,一段时间内,只取第一次点击的值,经典实现,点击按钮上传。
<button id="bt">
</button>
let count=1
bt.onclick=throttle(()=>{
console.log(count++)
},1000)
function throttle(fn,delay=1000){
let timer=null;
return function(...args){
let ctx=this;
if(timer==null){
timer=setTimeout(()=>{
fn.apply(ctx,args)
timer=null
},delay)
}
}
}