防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
- html
<body>
<button id="debounce">防抖</button>
<button id="throttle">节流</button>
<script src="./index.js"></script>
</body>
- js
// 高频率执行函数
function highFrequency(text) {
console.log(text);
}
// 防抖
document.querySelector("#debounce").onclick = debounce(highFrequency, "函数防抖");
// 对高频率执行函数进行防抖处理
function debounce(fn, ...args) {
let clock = null;
return function() {
if (clock) {
clearTimeout(clock);
}
clock = setTimeout(function() {
fn(...args);
}, 1000);
};
}
// 节流
document.querySelector("#throttle").onclick = throttle(highFrequency, "函数节流");
// 对高频率执行函数进行节流处理
function throttle(fn, ...args) {
let canRun = true;
return function() {
if (!canRun) {
return;
}
canRun = false;
setTimeout(function() {
fn(...args);
canRun = true;
}, 1000);
};
}
网友评论