函數節流與函數防抖

最近由于處于互聯網大廠的秋招季節，因此這些天都在看前端性能優化和算法方面的知識。在性能優化方面，看了網上的一些文章，同時看完了《高性能網站建設指南》和《高性能JavaScript》兩本書，頗有收獲，可以參看這篇文章，主要是一些前端性能優化方面的總結。傳送門：前端性能優化最佳實踐

這篇文章主要是講函數節流與函數防抖相關知識的。雖然在上面兩本書里面沒有談及這兩方面的內容，但是我覺得，對JS常用事件進行節流或者防抖的處理是屬于性能優化方面的。

目的

實現了這兩個功能函數之后發現，節流同防抖在實現過程可能不太一樣，但是目的和本質都是一樣的：提高性能

相同點

節流和防抖都是采用閉包的形式來實現。這主要運用了閉包的一個特性：能夠記住并訪問所在的詞法作用的標識符。如果對閉包不了解的可以看看這個回答：什么是閉包

用途

假如，一條河流，想檢測水質問題。那么我們可以完全堵住，在某個時間段后，一次性釋放。那么這些水就屬于檢測通過了。（這個比喻我都很迷... ）

函數防抖也是大同小異。在某個特定時間后執行函數，但是在此時間段內重復調用函數的話，不會執行。只有當用戶停下操作后，才會在該時間后執行此函數。

主要用于輸入框keyup事件等一些需要用戶輸入內容的行為。

函數防抖

function debounce (fn, wait) {let timer = nullreturn function () {if (timer) clearTimeout(timer)timer = setTimeout(() => {timer = nullfn.apply(this, arguments)}, wait)} }

函數節流

最簡單的比喻，河流的水，如果想控制一下流量，那就可以讓水流間隔的流。有點類似函數節流，間隔執行；如果完全堵住，在某個時間段后一次性釋放，就是函數防抖了。

最簡單的函數節流實現方式如下

function throttle (fn, wait) {let start = 0return function () {const curr = Date.now()if (curr - start < wait) returnstart = currfn.apply(fn, arguments)} }

假如想加一些立即執行、多少秒后必須執行，那么可以參考下面的函數

function throttle (fn, option) {let time = nulllet start = nulllet setting = {delay: 300,mustRunTime: 500, // 在500內必須執行。如在resize事件時，按住不放超過500ms之后就必須執行函數。immediate: false}option = Object.assign({}, setting, option)return function () {let args = argumentslet context = thislet currStart = +new Date()if (!start) {start = currStart}let timeDiff = currStart - start// 初始調用resise函數時立即執行函數，而不用等待delay的時間if (option.immediate || timeDiff > option.mustRunTime || timeDiff > option.delay) {fn.apply(context, args)option.immediate = falsestart = currStart} else {window.clearTimeout(time)time = window.setTimeout(() => {fn.apply(context, args)}, option.delay)}} }

最后

最后超簡單總結下：
函數節流：間隔執行函數，主要用于keyup事件。
函數防抖：某個時間內都不執行，該時間后才執行函數，主要用于touchmove, resize等事件。

轉載于:https://www.cnblogs.com/unclekeith/p/7466205.html

總結

以上是生活随笔為你收集整理的函数节流与防抖的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。