完全弄懂節流和防抖

節流和防抖

這兩個東西，你確定聽過，就是兩種優化瀏覽器性能的手段。相關文章你確定也看過，若是仍是不太清楚，不要緊，看完這篇短文，相信你能輕鬆理解其中差異。前端

防抖（deounce）

咱們先說防抖吧，這裏有個小笑話，看完你應該就秒懂了：git

小明軍訓，教官發令：向左轉！向右轉！向後轉！你們都照着作，惟有小明坐下來休息，教官火的一批，大聲斥問他爲啥不聽指揮？小明說，我準備等你想好到底往哪一個方向轉，我再轉。面試

雖然是個笑話，卻很好地說明了防抖的定義：給一個固定時間，若是你開始觸發動做，而且在這個固定時間內再也不有任何動做，我就執行一次，不然我每次都會從新開始計時。咱們能夠用極端狀況理解它：若是給定時間間隔足夠大，而且期間一直有動做觸發，那麼回調就永遠不會執行。放在笑話的語境裏就是，只有教官最後一次發號後，小明纔會轉。後端

節流（throttle）

若是你理解了防抖，關於節流，就更好理解了瀏覽器

學生上自習課，班主任五分鐘過來巡視一次，五分鐘內隨便你怎麼皮，房頂掀了都沒事，只要你別在五分鐘的時間間隔點上被班主任逮到，逮不到就當沒發生，逮到她就要弄你了。markdown

在這裏，班主任就是節流器；你搞事，就是用戶觸發的事件；你被班主任逮住弄，就是執行回調函數。frontend

節流的定義：用戶會反覆觸發一些操做，好比鼠標移動事件，此時只須要指定一個「巡視」的間隔時間，無論用戶期間觸發多少次，只會在間隔點上執行給定的回調函數。，咱們一樣能夠用極端狀況來理解：若是給定的間隔時間是 240毫秒，用戶永不間斷地在屏幕上瘋狂移動鼠標，那麼你的回調函數會分別在 240毫秒、 480毫秒、 720毫秒... 就這麼一直執行下去ide

這倆有啥用？

防抖（deounce）:
- 可用於input.change實時輸入校驗，好比輸入實時查詢，你不可能摁一個字就去後端查一次，確定是輸一串，統一去查詢一次數據。
- 可用於 window.resize 事件，好比窗口縮放完成後，纔會從新計算部分 DOM 尺寸
節流（throttle），用於監聽 mousemove、鼠標滾動等事件，一般可用於：拖拽動畫、下拉加載。

節流一般用在比防抖刷新更頻繁的場景下，並且大部分是須要涉及動畫的操做。函數

Talking is cheap show me the code

防抖

function debounce (fn, delay = 200) {
  let timeout;
  return function() {
    // 從新計時
    timeout && clearTimeout(timeout);
    timeout = setTimeout(fn.bind(this), delay, ...arguments);
  }
}

const handlerChange = debounce(function () {alert('更新觸發了')})

// 綁定監聽
document.querySelector("input").addEventListener('input', handlerChange);

複製代碼

節流

function throttle (fn, threshhold = 200) {
  let timeout;
  // 計算開始時間
  let start = new Date();
  return function () {
    // 觸發時間
    const current = new Date() - 0;
    timeout && clearTimeout(timeout);
    // 若是到了時間間隔點，就執行一次回調
    if (current - start >= threshhold) {
      fn.call(this, ...arguments);
      // 更新開始時間
      start = current;
    } else {
      // 保證方法在脫離事件之後還會執行一次
      timeout = setTimeout(fn.bind(this), threshhold, ...arguments);
    }
  }
}

let handleMouseMove = throttle(function(e) {
  console.log(e.pageX, e.pageY);
})

// 綁定監聽
document.querySelector("#panel").addEventListener('mousemove', handleMouseMove);
複製代碼

從代碼上看不難發現，節流只是在防抖的基礎上加了時間差的判斷，多穿了件馬甲而已。oop

小兄弟，你是否還有不少問號？？

防抖用在 input.change 上我能理解，鼠標拖拽功能爲啥不能用防抖？用的話會發生什麼？

仔細想想，簡單來講，防抖實際上是隻會觸發一次，明顯不能用在這種拖拽場景下，若是硬用上去，會出現用戶拖了彈框它不動，過了一下子「啪」地就跳過去了。出現這種狀況，老闆是要請你喝茶的。
節流的代碼，爲何要加上那句 setTimeout ？我不加會怎麼樣？

這句代碼的主要做用，說白了其實就是「兜底」，它確保了你的回調無論怎麼樣，必定會執行一次。仍是用鼠標拖拽彈框功能舉例，這個兜底解決了拖拽彈框在速度很快的狀況下彈框不動的問題、也確保你最後拖拽完成，放開鼠標，彈框能回到你鼠標的位置，就是代碼註釋裏寫的：保證方法在脫離事件之後還會執行一次。

其實這兩個問題，是我初見防抖和節流的時候所疑惑的，但願也能幫助到你。

再深刻一點

原本是沒有寫這塊內容的，可是評論區有朋友指出了節流函數存在的問題，我就順帶着又瞭解了一些防抖和節流的細節。

咱們能夠從上面的節流函數入手，你可否看出存在什麼問題呢？這個也是評論區朋友指出的：這個節流函數第一次不會當即執行，而是會等待一段時間執行，而且這個等待時間越長，延遲越是明顯，咱們用這個思路再審視一下防抖函數，也一樣有這個問題。

那麼怎麼解決呢？針對防抖和節流，其實有當即執行和非當即執行兩種版本，上面寫的就是非當即執行版本。想解決上面的問題也很簡單，把函數改造一下，使用當即執行版本就能夠了~只須要改變一行代碼。（同理，節流也是相似）

// 當即執行的防抖函數
function debounce (fn, delay = 200) {
  let timeout;
  return function() {
    // 若是 timeout == null 說明是第一次，直接執行回調，不然從新計時
+   timeout == null ? fn.call(this, ...arguments) : clearTimeout(timeout);
    timeout = setTimeout(fn.bind(this), delay, ...arguments);
  }
}

const handlerChange = debounce(function () {alert('更新觸發了')})

// 綁定監聽
document.querySelector("input").addEventListener('input', handlerChange);

複製代碼

可視化

若是你仍是沒法直觀感覺兩者差異，進入傳送門

本篇文章已收錄入前端面試指南專欄

總結

關於節流和防抖這兩個概念，我也看過不少解說，說實話，不多有文章能真的說清楚的。基本上就是官腔+代碼流的一套組合拳，都在說 Talking is cheap show me the code，可是不少時候，每每是 Fucking code is so difficult, talk to me please. 真正能讓人豁然開朗的，應該是大白話。

真心但願這篇文章能幫到你，幫到了點個贊，感謝！