一、防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
思路
每次触发事件时都取消之前的延时调用方法
function debounce(fn) {
let timeout = null;
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, 500);
}
}
二、节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
思路
每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fun) {
let isRun = true;
return function() {
if(!isRun) return;
isRun = false;
setTimeout(() => {
fn.apply(this, arguments);
isRun = true;
}, 500)
}
}