防抖(debounce)

基於上述場景，首先提出第一種思路：在第一次觸發事件時，不立即執行函式，而是給出一個期限值比如200ms，然後：

• 如果在200ms內沒有再次觸發滾動事件，那麼就執行函式
• 如果在200ms內再次觸發滾動事件，那麼當前的計時取消，重新開始計時

效果：如果短時間內大量觸發同一事件，只會執行一次函式。

實現：既然前面都提到了計時，那實現的關鍵就在於setTimeout這個函式，由於還需要一個變數來儲存計時，考慮維護全域性純淨，可以藉助閉包來實現：

節流(throttle)

節流，顧名思義，控制流量。用於使用者在與頁面互動時控制事件發生的頻率，一般場景是單位的時間或其它間隔內定時執行操作。一段時間內，事件在每次到達我們規定的間隔 n 秒時觸發一次。

特點：每等待某種間隔後，進行操作持續觸發並不會執行多次到一定時間 / 其它間隔 ( 如滑動的高度 )再去執行應用場景 ( 注：因以下例子涉及公司業務內容，不進行實際頁面截圖展示 )：埋點場景。商品搜尋列表、商品櫥窗等，使用者滑動時 定時 / 定滑動的高度 傳送埋點請求

解決方法：我們可以設計一種類似控制閥門一樣定期開放的函式，也就是讓函式執行一次後，在某個時間段內暫時失效，過了這段時間後再重新啟用（類似於技能冷卻時間）。

函式防抖與節流---面試題

正常：事件觸發非常頻繁，而且每一次的觸發，回撥函式都要去執行（如果時間很短，而回調函式內部有計算，那麼很可能出現瀏覽器卡頓）

防抖：前面的所有的觸發都被取消

節流：在規定的間隔時間範圍內不會重複觸發回撥，只有大於這個時間間隔才會觸發回撥，把頻繁觸發變為少量觸發

參考：淺談 JS 防抖和節流 - SegmentFault 思否