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

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

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

目的

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

相同點(diǎn)

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

用途

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

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

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

最簡(jiǎn)單的函數(shù)節(jié)流實(shí)現(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事件時(shí)，按住不放超過(guò)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ù)時(shí)立即執(zhí)行函數(shù)，而不用等待delay的時(shí)間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ǎn)單總結(jié)下：
函數(shù)節(jié)流：間隔執(zhí)行函數(shù)，主要用于keyup事件。
函數(shù)防抖：某個(gè)時(shí)間內(nèi)都不執(zhí)行，該時(shí)間后才執(zhí)行函數(shù)，主要用于touchmove, resize等事件。

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

總結(jié)

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

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