防抖
某事件触发时,延迟多长时间执行事件处理函数,若在延迟时间内用户再次触发了该事件,就清除上次的定时器,重新设置定时器,最近一次动作结束后,再执行事件处理函数.
<body>
<button id="btn">点我</button>
<script>
const btn = document.getElementById('btn');
btn.onclick = debounce(() => {
console.log(1111);
}, 2000)
function debounce(fn, delay) {
let timer = null;
return function () {
if (timer) clearTimeout(timer); // 如果timer存在,表示在指定时间内连续触发,则清除定时器
timer = setTimeout(fn, delay)
}
}
</script>
</body>
节流
第一次操作需执行一次事件处理函数,若之后持续操作,则每隔指定时间后执行一次事件处理函数。
document.getElementById('btn').onclick = throttle(function(){
console.log(1111);
},2000)
function throttle(fn,time){
let nowTime = Date.now() //当前时间
return function(){
let lastTime = Date.now() // 当下点击的时间
if(lastTime - nowTime >= time){
fn()
nowTime = lastTime // 将当前时间修改为执行事件处理函数时的时间
}
}
}