### 防抖、節流 開發中經常會有一些持續觸發的事件，比如scroll、resize、mousemove、input等。頻繁的執行回調，不僅對性能有很大影響，甚至會有相應跟不上，造成頁面卡死等現象。 針對這種問題有兩種解決方案，防抖和節流。 #### 防抖 事件觸發后的time時間內只執行一次。原理是維護一個延時器，規定在time時間后執行函數，如果在time時間內再次觸發，則取消之前的延時器重新設置。所以回調只在最后執行一次。 ~~~js function debounce(func, time = 0) { if (typeof func !== 'function') { throw new TypeError('Expect a function') } let timer return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func() }, time) } } ~~~ #### 節流 在事件觸發過程中，每隔wait執行一次回調。 可選參數三 `trailing`，事件第一次觸發是否執行一次回調。默認true，即第一次觸發先執行一次。 ~~~js function throttle(func, wait = 0, trailing = true) { if (typeof func !== 'function') { throw new TypeError('Expected a function') } let timer let start = +new Date return function (...rest) { let now = +new Date if (timer) { clearTimeout(timer) } if (now - start >= wait || trailing) { func.apply(this, rest) start = now trailing = false } else { timer = setTimeout(() => { func(...rest) }, wait) } } } ~~~ **區別：** 不管事件觸發有多頻繁，節流都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖只是在最后一次事件觸發后才執行一次函數。 **場景：** 防抖：比如監聽頁面滾動，滾動結束并且到達一定距離時顯示返回頂部按鈕，適合使用防抖。 節流：比如在頁面的無限加載場景下，需要用戶在滾動頁面時過程中，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據。此場景適合用節流來實現。 ## 來自 鏈接：https://www.jianshu.com/p/919eeda7152f