函数防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。
函数节流:高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。
// 防抖函数
function debounceFn(fn, delay){
let timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay)
}
}
function handleScroll(){
console.log('scroll is doing')
}
window.addEventListener('scroll', debounceFn(handleScroll, 300))
// 节流函数
function throttle(fn delay){
let cando = true;
return function(){
if(!cando){
return;
}
cando = false;
setTimeout(() => {
cando = true;
fn.apply(this, arguments);
})
}
}
function sayHello(e) {
console.log('节流:hello', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHello,500));