函數(shù)節(jié)流與函數(shù)防抖

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

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

目的

實現(xiàn)了這兩個功能函數(shù)之后發(fā)現(xiàn)，節(jié)流同防抖在實現(xiàn)過程可能不太一樣，但是目的和本質(zhì)都是一樣的：提高性能

相同點

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

用途

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

函數(shù)防抖也是大同小異。在某個特定時間后執(zhí)行函數(shù)，但是在此時間段內(nèi)重復(fù)調(diào)用函數(shù)的話，不會執(zhí)行。只有當(dāng)用戶停下操作后，才會在該時間后執(zhí)行此函數(shù)。

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

函數(shù)防抖

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

函數(shù)節(jié)流

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

最簡單的函數(shù)節(jié)流實現(xiàn)方式如下

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

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

function throttle (fn, option) {let time = nulllet start = nulllet setting = {delay: 300,mustRunTime: 500, // 在500內(nèi)必須執(zhí)行。如在resize事件時，按住不放超過500ms之后就必須執(zhí)行函數(shù)。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// 初始調(diào)用resise函數(shù)時立即執(zhí)行函數(shù)，而不用等待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)}} }

最后

最后超簡單總結(jié)下：
函數(shù)節(jié)流：間隔執(zhí)行函數(shù)，主要用于keyup事件。
函數(shù)防抖：某個時間內(nèi)都不執(zhí)行，該時間后才執(zhí)行函數(shù)，主要用于touchmove, resize等事件。

轉(zhuǎn)載于:https://www.cnblogs.com/unclekeith/p/7466205.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。