聊一聊函式防抖和函式節流
在日常的“敏捷開發”，一味地為了快速的完成需求，其中遇到一個以前經常需要做到的而又懶得去優化的需求–滑動加載更多資料，也就是分頁，算是腦抽啥的想優化一下代碼性能，于是就想到了函式防抖和函式節流的應用場景和原理，
對于大多數人來說，這可能都是用到爛的技術，只能感慨一句，
那么廢話少說，我們先來了解一下這兩個分別的概念
概念
函式防抖(debounce)
函式防抖是指觸發事件后在一定的時間內，函式只能執行一次，如果在這個時間段內重新觸發事件會重新計算執行時間，簡單來說，就是一定時間內連續多次觸發事件，方法只在最后一次觸發事件的時候執行，
函式節流(throttle)
函式節流是指預先設定一個執行周期，當呼叫動作的時刻大于等于執行周期則執行該動作，然后進入下一個新周期，簡單來說，就是限制一個方法在一定時間內執行一次，
常用的應用場景
函式防抖(debounce)
- 根據輸入的內容檢索，當一定時間內沒有輸入，執行檢索結果的展示，
- 調整視窗的大小，當一定時間內沒有調整，計算視窗的大小，
- 多次點擊按鈕，當一定時間內執行執行一次點擊事件，
函式節流(throttle) - 滾動加載更多資料，監聽到滾動到底部加載資料
- 搜索聯動
實作原理
使用定時器實作的函式防抖
function debounce(fn, delay = 500){
let timer = null;
return function () {
if(timer){
clearTimeout(timer);
}
timer = setTimeout(()=>{
fn.apply(this, arguments)
timer = null
}, delay);
};
};
// 應用例子 輸入框輸入檢索
let input = document.getElementsByTagName('input')[0];
input.addEventListener('keyup', debounce(function (){
console.log(this.value)
}, 500))
通過閉包標記保存
setTimeout，每當用戶輸入的時候把前一個setTimeout清除掉，在創建一個新的setTimeout，保證輸入字符后在一定的時間間隔內如果還有字符輸入就不執行fn方法，
使用定時器實作的函式節流
function throttle(fn, delay = 100) {
let timer = null
return function () {
if(timer){
return
}
timer = setTimeout(()=>{
fn.apply(this, arguments)
timer = null
}, delay)
}
}
// 應用例子 判斷滾動到底部
window.addEventListener('scroll', throttle(function (){
let scrollTop = document.documentElement.scrollTop
|| document.body.scrollTop;
let clientHeight = document.documentElement.clientHeight
|| document.body.clientHeight;
let scrollHeight = document.documentElement.scrollHeight
|| document.body.scrollHeight;
if (scrollTop + clientHeight === scrollHeight) {
console.log('end');
}
}, 100))
通過閉包標記保存
setTimeout，每當用戶滾動的時候判斷是否有標記存在，存在則return跳過，不存在則標記一個setTimeout并在回呼方法執行后將標記重置為null，
異同比較
相同點
- 通過
setTimeout實作 - 目的都是為了降低執行頻率，節省計算資源
不同點 - 函式防抖在一段連續操作結束后處理回呼，函式節流在一段連續操作中，每隔一段時間執行一次，
好了，以上就是這次整理的關于函式節流和函式防抖的理解，希望能給大家一點幫助，臨近年底，先祝大家kpi滿滿，年終豐收，我們下期再見，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/232059.html
標籤：其他
上一篇：前端學習（2692）：重讀vue電商網站13之使用動態編輯標簽
下一篇：為videojs添加自定義組件