前言

有echarts使用經驗的同學可能遇到過這樣的場景，在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味著echarts實例會連續的重繪這是非常耗性能的。還有一個常見的場景在input標簽的input事件里請求后端接口，input事件也是連續觸發的，假設我輸入了“12”就會請求兩次接口參數分別是“1”和“12”，比浪費網絡資源更要命的是如果參數為“1”的請求返回數據的時間晚于參數為“12”的接口，那么我們得到的數據是和期望不符的。當然基于axios可以做很多封裝可以取消上一個請求或者通過攔截做處理，但還是從防抖入手比較簡單。

防抖和節流到底是啥

函數防抖（debounce）

解釋：當持續觸發某事件時，一定時間間隔內沒有再觸發事件時，事件處理函數才會執行一次，如果設定的時間間隔到來之前，又一次觸發了事件，就重新開始延時。

案例：持續觸發scroll事件時，并不立即執行handle函數，當1000毫秒內沒有觸發scroll事件時，才會延時觸發一次handle函數。

function debounce(fn, wait) { let timeout = null return function() {  if(timeout !== null) clearTimeout(timeout)     timeout = setTimeout(fn, wait); }}function handle() {   console.log(Math.random())}window.addEventListener('scroll', debounce(handle, 1000))

addEventListener的第二個參數實際上是debounce函數里return回的方法，let timeout = null 這行代碼只在addEventListener的時候執行了一次 觸發事件的時候不會執行，那么每次觸發scroll事件的時候都會清除上次的延時器同時記錄一個新的延時器，當scroll事件停止觸發后最后一次記錄的延時器不會被清除可以延時執行，這是debounce函數的原理

函數節流（throttle）

解釋：當持續觸發事件時，有規律的每隔一個時間間隔執行一次事件處理函數。

案例：持續觸發scroll事件時，并不立即執行handle函數，每隔1000毫秒才會執行一次handle函數。

function throttle(fn, delay) {  var prev = Date.now()      return function() {          var now = Date.now()          if (now - prev > delay) {             fn()           prev = Date.now()         }      }    }    function handle() {       console.log(Math.random())   }window.addEventListener('scroll', throttle(handle, 1000))

原理和防抖類似，每次執行fn函數都會更新prev用來記錄本次執行的時間，下一次事件觸發時判斷時間間隔是否到達預先的設定，重復上述操作。

防抖和節流都可以用于 mousemove、scroll、resize、input等事件，他們的區別在于防抖只會在連續的事件周期結束時執行一次，而節流會在事件周期內按間隔時間有規律的執行多次。