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

函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover，input輸入框的keypress等事件在觸發(fā)時(shí)，會(huì)不斷地調(diào)用綁定在事件上的回調(diào)函數(shù)，極大地浪費(fèi)資源，降低前端性能。為了優(yōu)化體驗(yàn)，需要對(duì)這類事件進(jìn)行調(diào)用次數(shù)的限制。

函數(shù)防抖

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

根據(jù)函數(shù)防抖思路設(shè)計(jì)出第一版的最簡(jiǎn)單的防抖代碼：

vartimer;// 維護(hù)同一個(gè)timerfunctiondebounce(fn, delay){clearTimeout(timer);timer = setTimeout(function(){fn();}, delay);}

用onmousemove測(cè)試一下防抖函數(shù):

// testfunctiontestDebounce(){console.log('test');}document.onmousemove =()=>{debounce(testDebounce,1000);}

上面例子中的debounce就是防抖函數(shù)，在document中鼠標(biāo)移動(dòng)的時(shí)候，會(huì)在onmousemove最后觸發(fā)的1s后執(zhí)行回調(diào)函數(shù)testDebounce；如果我們一直在瀏覽器中移動(dòng)鼠標(biāo)（比如10s），會(huì)發(fā)現(xiàn)會(huì)在10 + 1s后才會(huì)執(zhí)行testDebounce函數(shù)（因?yàn)閏learTimeout(timer)），這個(gè)就是函數(shù)防抖。

在上面的代碼中，會(huì)出現(xiàn)一個(gè)問題，var timer只能在setTimeout的父級(jí)作用域中，這樣才是同一個(gè)timer，并且為了方便防抖函數(shù)的調(diào)用和回調(diào)函數(shù)fn的傳參問題，我們應(yīng)該用閉包來解決這些問題。

優(yōu)化后的代碼：

functiondebounce(fn, delay){vartimer;// 維護(hù)一個(gè) timerreturnfunction(){var_this =this;// 取debounce執(zhí)行作用域的thisvarargs =arguments;if(timer) {clearTimeout(timer);}timer = setTimeout(function(){fn.apply(_this, args);// 用apply指向調(diào)用debounce的對(duì)象，相當(dāng)於_this.fn(args);}, delay);};}

測(cè)試用例：

// testfunctiontestDebounce(e, content){console.log(e, content);}vartestDebounceFn = debounce(testDebounce,1000);// 防抖函數(shù)document.onmousemove =function(e){testDebounceFn(e,'debounce');// 給防抖函數(shù)傳參}

使用閉包后，解決傳參和封裝防抖函數(shù)的問題，這樣就可以在其他地方隨便將需要防抖的函數(shù)傳入debounce了。

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

每隔一段時(shí)間，只執(zhí)行一次函數(shù)。

定時(shí)器實(shí)現(xiàn)節(jié)流函數(shù)：

請(qǐng)仔細(xì)看清和防抖函數(shù)的代碼差異

functionthrottle(fn, delay){vartimer;returnfunction(){var_this =this;varargs =arguments;if(timer) {return;}timer = setTimeout(function(){fn.apply(_this, args);timer =null;// 在delay後執(zhí)行完fn之後清空timer，此時(shí)timer為假，throttle觸發(fā)可以進(jìn)入計(jì)時(shí)器}, delay)}}

測(cè)試用例：

functiontestThrottle(e, content){console.log(e, content);}vartestThrottleFn = throttle(testThrottle,1000);// 節(jié)流函數(shù)document.onmousemove =function(e){testThrottleFn(e,'throttle');// 給節(jié)流函數(shù)傳參}

上面例子中，如果我們一直在瀏覽器中移動(dòng)鼠標(biāo)（比如10s），則在這10s內(nèi)會(huì)每隔1s執(zhí)行一次testThrottle，這就是函數(shù)節(jié)流。

函數(shù)節(jié)流的目的，是為了限制函數(shù)一段時(shí)間內(nèi)只能執(zhí)行一次。因此，定時(shí)器實(shí)現(xiàn)節(jié)流函數(shù)通過使用定時(shí)任務(wù)，延時(shí)方法執(zhí)行。在延時(shí)的時(shí)間內(nèi)，方法若被觸發(fā)，則直接退出方法。從而，實(shí)現(xiàn)函數(shù)一段時(shí)間內(nèi)只執(zhí)行一次。

根據(jù)函數(shù)節(jié)流的原理，我們也可以不依賴setTimeout實(shí)現(xiàn)函數(shù)節(jié)流。

時(shí)間戳實(shí)現(xiàn)節(jié)流函數(shù)：

functionthrottle(fn, delay){varprevious =0;// 使用閉包返回一個(gè)函數(shù)並且用到閉包函數(shù)外面的變量previousreturnfunction(){var_this =this;varargs =arguments;varnow =newDate();if(now - previous > delay) {fn.apply(_this, args);previous = now;}}}// testfunctiontestThrottle(e, content){console.log(e, content);}vartestThrottleFn = throttle(testThrottle,1000);// 節(jié)流函數(shù)document.onmousemove =function(e){testThrottleFn(e,'throttle');// 給節(jié)流函數(shù)傳參}

其實(shí)現(xiàn)原理，通過比對(duì)上一次執(zhí)行時(shí)間與本次執(zhí)行時(shí)間的時(shí)間差與間隔時(shí)間的大小關(guān)系，來判斷是否執(zhí)行函數(shù)。若時(shí)間差大于間隔時(shí)間，則立刻執(zhí)行一次函數(shù)。并更新上一次執(zhí)行時(shí)間。

異同比較

相同點(diǎn)：

都可以通過使用setTimeout 實(shí)現(xiàn)。

目的都是，降低回調(diào)執(zhí)行頻率。節(jié)省計(jì)算資源。

不同點(diǎn)：

函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用clearTimeout和setTimeout實(shí)現(xiàn)。函數(shù)節(jié)流，在一段連續(xù)操作中，每一段時(shí)間只執(zhí)行一次，頻率較高的事件中使用來提高性能。

函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。

常見應(yīng)用場(chǎng)景

函數(shù)防抖的應(yīng)用場(chǎng)景

連續(xù)的事件，只需觸發(fā)一次回調(diào)的場(chǎng)景有：

搜索框搜索輸入。只需用戶最后一次輸入完，再發(fā)送請(qǐng)求

手機(jī)號(hào)、郵箱驗(yàn)證輸入檢測(cè)

窗口大小Resize。只需窗口調(diào)整完成后，計(jì)算窗口大小。防止重復(fù)渲染。

函數(shù)節(jié)流的應(yīng)用場(chǎng)景

間隔一段時(shí)間執(zhí)行一次回調(diào)的場(chǎng)景有：

滾動(dòng)加載，加載更多或滾到底部監(jiān)聽

谷歌搜索框，搜索聯(lián)想功能

高頻點(diǎn)擊提交，表單重復(fù)提交