防抖（JS的事件多次觸發(fā)，只執(zhí)行最后一次）
應用場景： input輸入信息進行搜索藕咏，如果每敲一個字符就請求后臺接口役耕，給后臺的壓力太大了缩赛，所以做好防抖耙箍，即讓程序只執(zhí)行最后一次的事件。
為解決該問題酥馍，探索到了兩個解決方案：
- 方案一：閉包防抖
之前有看過用全局變量進行防抖的案例究西，但個人認為還是用閉包模塊化實現(xiàn)起來更完美，這樣業(yè)務層的代碼可以清晰展現(xiàn)出來物喷，方便多人協(xié)作團隊看懂代碼卤材。
<input type="text">
<script>
let inp = document.querySelector('input');
inp.oninput = debounce(function() {
console.log(this.value); // 業(yè)務都在這里
}, 500)
function debounce(fn,delay) {
let t = null;
return function(){
if (t!= null) {
clearTimeout(t)
}
t = setTimeout(() => {
// 這里注意 不能直接是fn() 因為this指向是window
fn.call(this)
}, delay)
}
}
</script>
- 方案二：
直接使用lodash工具庫的debounce方法
參考網(wǎng)址：https://blog.csdn.net/qq_39139322/article/details/103295326
節(jié)流（控制高頻事件執(zhí)行次數(shù)）
應用場景： 滾輪滾動觸發(fā)事件頻繁，加上延遲可低頻觸發(fā)
看過了上面閉包防抖的寫法峦失，下面閉包節(jié)流的寫法也很好理解了~
window.onscroll = throttle(function() {
console.log('hello world');
}, 500)
function throttle (fn, delay) {
let flag = true;
return function () {
if (flag) {
setTimeout(() => {
fn.call(this)
flag = true
},delay)
}
flag = false
}
}
