防抖：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間
節(jié)流：高頻事件觸發(fā)，但在n秒內(nèi)只會執(zhí)行一次，所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率
- html
<body>
<button id="debounce">防抖</button>
<button id="throttle">節(jié)流</button>
<script src="./index.js"></script>
</body>
- js
// 高頻率執(zhí)行函數(shù)
function highFrequency(text) {
console.log(text);
}
// 防抖
document.querySelector("#debounce").onclick = debounce(highFrequency, "函數(shù)防抖");
// 對高頻率執(zhí)行函數(shù)進行防抖處理
function debounce(fn, ...args) {
let clock = null;
return function() {
if (clock) {
clearTimeout(clock);
}
clock = setTimeout(function() {
fn(...args);
}, 1000);
};
}
// 節(jié)流
document.querySelector("#throttle").onclick = throttle(highFrequency, "函數(shù)節(jié)流");
// 對高頻率執(zhí)行函數(shù)進行節(jié)流處理
function throttle(fn, ...args) {
let canRun = true;
return function() {
if (!canRun) {
return;
}
canRun = false;
setTimeout(function() {
fn(...args);
canRun = true;
}, 1000);
};
}
