什麼是防抖和節流，他們的應用場景是哪裏

本題摘自於我 github 上的面試每日一題： https://github.com/shfshanyue...，並有大廠面經及內推信息，可在左下角打開原文連接

防抖 (debounce)

防抖，顧名思義，防止抖動，以避免把一次事件誤認爲屢次，敲鍵盤就是一個天天都會接觸到的防抖操做。

想要了解一個概念，必先了解概念所應用的場景。在 JS 這個世界中，有哪些防抖的場景呢

1. 登陸、發短信等按鈕避免用戶點擊太快，以至於發送了屢次請求，須要防抖
2. 調整瀏覽器窗口大小時，resize 次數過於頻繁，形成計算過多，此時須要一次到位，就用到了防抖
3. 文本編輯器實時保存，當無任何更改操做一秒後進行保存

代碼以下，能夠看出來防抖重在清零 clearTimeout(timer)

function debounce (f, wait) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      f(...args)
    }, wait)
  }
}

節流 (throttle)

節流，顧名思義，控制水的流量。控制事件發生的頻率，如控制爲1s發生一次，甚至1分鐘發生一次。與服務端(server)及網關(gateway)控制的限流 (Rate Limit) 相似。

1. scroll 事件，每隔一秒計算一次位置信息等
2. 瀏覽器播放事件，每一個一秒計算一次進度信息等
3. input 框實時搜索併發送請求展現下拉列表，沒隔一秒發送一次請求 (也可作防抖)

代碼以下，能夠看出來節流重在開關鎖 timer=null

function throttle (f, wait) {
  let timer
  return (...args) => {
    if (timer) { return }
    timer = setTimeout(() => {
      f(...args)
      timer = null
    }, wait)
  }
}

總結 (簡要答案)

• 防抖：防止抖動，單位時間內事件觸發會被重置，避免事件被誤傷觸發屢次。代碼實現重在清零 clearTimeout
• 節流：控制流量，單位時間內事件只能觸發一次，若是服務器端的限流即 Rate Limit。代碼實現重在開鎖關鎖 timer=timeout; timer=null

關注我

掃碼添加個人微信，備註進羣，加入高級前端進階羣

<figure>
<img width="240" src="https://user-gold-cdn.xitu.io/2020/6/29/172fe14e18d2b38c?w=430&h=430&f=jpeg&s=38173" alt="加我微信拉你進入面試交流羣">
<figcaption>加我微信拉你進入面試交流羣</figcaption>
</figure>

歡迎關注公衆號【互聯網大廠招聘】，定時推送大廠內推信息及面試題簡答，天天學習五分鐘，半年進入大廠中

<figure>
<img width="240" src="https://user-gold-cdn.xitu.io/2020/6/30/17302a9e47a3a422?w=430&h=430&f=webp&s=7634" alt="更多大廠招聘，面試面經，技能要求，請關注公衆號【互聯網大廠招聘】">
<figcaption>天天五分鐘，半年大廠中</figcaption>
</figure>