防抖:防抖是任务频繁触发的情况下,只有任务触发的间隔超过指定间隔的时候,任务才会执行,一般用于输入框实时搜索,类似上电梯,进电梯后2s内电梯运行,这时有人又进入电梯,则重新归为2s后再运行
<body>
<button>防抖函数</button>
<script>
function onAction() {
console.log("防抖函数");
}
function debounce(fn, time) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
setTimeout(fn, time);
}
}
const oDebounce = debounce(onAction, 2000);
document.addEventListener('click',oDebounce);
</script>
</body>
节流:节流是规定函数在指定的时间间隔内只执行一次,一般用于scroll事件
<body>
<button>节流函数</button>
<script>
function onAction() {
console.log("节流函数");
}
function throttle(fn, time) {
let canRun = true;
return function () {
if (canRun == false) {
return;
}
canRun = false;
setTimeout(() => {
fn();
canRun = true;
}, time);
}
}
const oThrottle = throttle(onAction, 2000);
document.addEventListener('click', oThrottle);
</script>
</body>