第手寫Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash目錄前言防抖函數(shù)和節(jié)流函數(shù)的區(qū)別防抖函數(shù)的實(shí)現(xiàn)基本實(shí)現(xiàn)立即執(zhí)行取消功能返回結(jié)果節(jié)流函數(shù)的實(shí)現(xiàn)基本實(shí)現(xiàn)leading實(shí)現(xiàn)trailing實(shí)現(xiàn)取消功能和返回結(jié)果

前言

防抖函數(shù)和節(jié)流函數(shù),無(wú)論是寫業(yè)務(wù)的時(shí)候還是面試的時(shí)候,想必大家已經(jīng)聽(tīng)過(guò)很多次了吧.但是大家在用到的時(shí)候,有了解過(guò)他們之間的區(qū)別嘛,他們是如何實(shí)現(xiàn)的呢還是說(shuō)只是簡(jiǎn)單的調(diào)用下像lodash和underscore這種第三方庫(kù)提供給我們的節(jié)流和防抖函數(shù)呢

防抖函數(shù)和節(jié)流函數(shù)的區(qū)別

防抖函數(shù):是指觸發(fā)了一個(gè)事件,在規(guī)定的時(shí)間內(nèi),如果沒(méi)有第二次事件被觸發(fā),那么他就會(huì)執(zhí)行.換句話講,就是說(shuō),如果不斷有事件被觸發(fā),那么規(guī)定的執(zhí)行時(shí)間將會(huì)被不斷推遲

節(jié)流函數(shù):指的是在規(guī)定時(shí)間內(nèi),你無(wú)論觸發(fā)多少次事件,你也只會(huì)執(zhí)行一次.我舉個(gè)生活中的例子,就很好理解了.王者榮耀這個(gè)游戲可能很多人多玩過(guò),每個(gè)英雄都有自己的技能,在我們點(diǎn)擊一次后,該技能會(huì)進(jìn)入冷卻時(shí)間,即使我們點(diǎn)的再快,該技能在冷卻時(shí)間好之前也只能觸發(fā)一次(我們第一次點(diǎn)擊的時(shí)候)

防抖函數(shù)的實(shí)現(xiàn)

我將實(shí)現(xiàn)防抖函數(shù)的四個(gè)功能,希望大家能一步步的跟著來(lái),循序漸進(jìn),相信大家一定會(huì)有收獲的

基本實(shí)現(xiàn)

我們可以想下,要想一個(gè)事件在規(guī)定時(shí)間過(guò)后執(zhí)行,在JS中該怎么實(shí)現(xiàn)

好時(shí)間到

定時(shí)器,小伙伴們肯定都知道的吧

觸發(fā)事件,在一定時(shí)間后執(zhí)行,這個(gè)可以使用定時(shí)器解決了.

那么接下來(lái)還有一個(gè)問(wèn)題在觸發(fā)事件后,再觸發(fā)事件,該如何讓他推遲執(zhí)行呢

如果規(guī)定時(shí)間內(nèi),再觸發(fā)的話,我們就把之前創(chuàng)建的定時(shí)器刪除不就好了,對(duì)不對(duì)

這樣是不是就解決了我們的問(wèn)題,好,我們現(xiàn)在來(lái)寫下代碼,怕大家有點(diǎn)不明白

functiondebounce(fn,delay){

//定義一個(gè)定時(shí)器

lettimer=null;

//每次觸發(fā)的時(shí)候清空上一次的定時(shí)器

const_debounce=function(){

if(timer)clearTimeout(timer);

//根據(jù)傳進(jìn)來(lái)的延時(shí)執(zhí)行

timer=setTimeout(()={

fn();

},delay)

return_debounce;

這段代碼還是比較容易的吧,相信小伙伴們肯定都懂了

但是這段代碼還是有點(diǎn)問(wèn)題,我們來(lái)調(diào)用下第三方庫(kù)的underscore的防抖函數(shù)

body

button取消/button

inputtype="text"

scriptsrc="/npm/underscore@1.13.1/underscore-umd-min.js"/script

script

constbtn=document.querySelector("button");

constinput=document.querySelector("input");

letcount=0;

functiontest(event){

//注意這里的this和event

console.log(`發(fā)送${++count}網(wǎng)絡(luò)請(qǐng)求`,this,event);

return"我是返回結(jié)果";

input.oninput=_.debounce(test,2000);

/script

/body

我們打開(kāi)瀏覽器調(diào)試,看下輸出結(jié)果

可以看到this和Event輸出是沒(méi)有任何問(wèn)題的.

再來(lái)看看我們的輸出

你會(huì)發(fā)現(xiàn)this是window了而Event是undefined.

這是為什么呢

這是因?yàn)槲覀儗懙拇a沒(méi)有對(duì)this進(jìn)行一個(gè)綁定,同時(shí)也沒(méi)有將DOM元素的event接收

fn()直接執(zhí)行這時(shí)候的this是直接指向window的

functiondebounce(fn,delay){

lettimer=null;

//使用剩余參數(shù)接收所有的參數(shù)DOM在調(diào)用這個(gè)函數(shù)的時(shí)候,我們就能接收到event了

const_debounce=function(...args){

if(timer)clearTimeout(timer);

timer=setTimeout(()={

//注意我們使用apply進(jìn)行一個(gè)換綁,綁到執(zhí)行這個(gè)的DOM元素上

fn.apply(this,args);

},delay)

return_debounce;

至此,我們這個(gè)防抖函數(shù)的基本實(shí)現(xiàn)就沒(méi)有任何問(wèn)題了

看到這里的小伙伴們,你們真不錯(cuò)

這個(gè)基本實(shí)現(xiàn)拿來(lái)應(yīng)付面試已經(jīng)夠了,接下來(lái)我們還有一些額外的功能要實(shí)現(xiàn),想看的可以繼續(xù)往下看了,現(xiàn)在不想看的也可以收藏下,以后來(lái)看.

立即執(zhí)行

在某些應(yīng)用場(chǎng)景下,比如搜索的時(shí)候,你輸入第一個(gè)字符的時(shí)候,他就會(huì)聯(lián)想出一系列的字符,他不會(huì)等待一段時(shí)間后再去執(zhí)行,而是會(huì)立馬執(zhí)行,我們接下來(lái)實(shí)現(xiàn)下這個(gè)功能

首先,立即執(zhí)行這個(gè)功能,我們可以將它交給用戶來(lái)決定是不是要使用這個(gè)功能

debounce(fn,delay,immediate=false)

我們以參數(shù)的形式傳遞,默認(rèn)是關(guān)閉的

好,我們現(xiàn)在來(lái)看下代碼實(shí)現(xiàn)

functiondebounce(fn,delay,immediate=false){

lettimer=null;

//代碼規(guī)范我們最好不要修改用戶傳遞進(jìn)來(lái)的參數(shù)

//所以我們?cè)谙旅媛暶髁艘粋€(gè)變量用于控制

letisInvoke=false;

const_debounce=function(...args){

if(timer)clearTimeout(timer);

//如果immdiate為true

//isInvoke取反為true

if(immediate!isInvoke){

//會(huì)立馬執(zhí)行一次

fn.apply(this,args);

//同時(shí)將isInvoke設(shè)置為true,防止下次觸發(fā)的時(shí)候又再次觸發(fā)立即執(zhí)行

isInvoke=true;

}else{

//第一次觸發(fā)結(jié)束立即執(zhí)行后

//isInvoke會(huì)限定在定時(shí)器中輸入結(jié)束后才會(huì)重新刷新isInvoke

timer=setTimeout(()={

//剩下的操作在規(guī)定時(shí)間內(nèi)會(huì)等待定時(shí)器結(jié)束

fn.apply(this,args);

//同時(shí)重新刷新inInvoke

isInvoke=false;

},delay)

return_debounce;

好,這一塊還是比較簡(jiǎn)單的吧,相比大家應(yīng)該看懂了,如果有什么不懂的地方,歡迎評(píng)論區(qū)留言,我看見(jiàn)了就會(huì)回答的

那么我們開(kāi)始下一個(gè)篇章的如果用戶輸入之后不想讓他請(qǐng)求呢這時(shí)候我們就需要一個(gè)取消功能了,對(duì),我們接下來(lái)就是要實(shí)現(xiàn)取消功能了

取消功能

我們?cè)撊绾卧谑Ｓ嗟臅r(shí)間內(nèi)取消請(qǐng)求呢

對(duì)沒(méi)錯(cuò)!清空定時(shí)器

我們只需要在我們返回的函數(shù)上加個(gè)靜態(tài)方法給用戶提供個(gè)取消功能即可

我們來(lái)看下代碼實(shí)現(xiàn)

//給返回的這個(gè)函數(shù)添加一個(gè)靜態(tài)方法用于取消請(qǐng)求

_debounce.cancel=function(){

if(timer)clearTimeout(timer);

是不是很簡(jiǎn)單呢就這么簡(jiǎn)單一行代碼取消功能就完成了

好,我們還有最后一個(gè)功能需要實(shí)現(xiàn)的那就是如果開(kāi)發(fā)者想要拿到請(qǐng)求后的返回結(jié)果的話,我們現(xiàn)階段的防抖函數(shù)能不能做到呢貌似不行吧

所以接下來(lái),我們來(lái)實(shí)現(xiàn)最后一個(gè)功能取到返回結(jié)果

返回結(jié)果

我們思考一個(gè)問(wèn)題返回結(jié)果在哪呢

用戶傳遞一個(gè)函數(shù)給我們返回一個(gè)新的函數(shù)

那么返回結(jié)果一定是在用戶傳遞給我們的那個(gè)函數(shù)上的

所以關(guān)鍵就是將用戶的那個(gè)函數(shù)的返回結(jié)果傳遞出來(lái)

現(xiàn)在我們這里有兩個(gè)方案

回調(diào)函數(shù)Promise

我們先來(lái)看下回調(diào)函數(shù)的版本

//回調(diào)函數(shù)版本

functiondebounce(fn,delay,immediate=false,resultCallBack){

lettimer=null;

letisInvoke=false;

letresult=null;

const_debounce=function(...args){

if(timer)clearTimeout(timer);

if(immediate!isInvoke){

//接收結(jié)果

result=fn.apply(this,args);

resultCallBack(result);

isInvoke=true;

}else{

timer=setTimeout(()={

//接收結(jié)果

result=fn.apply(this,args);

resultCallBack(result);

isInvoke=false;

},delay)

_debounce.cancel=function(){

if(timer)clearTimeout(timer);

timer=null;

isInvoke=false;

return_debounce;

實(shí)際應(yīng)用

const_debounce=()={

debounce(test,1000)().then(res={

console.log(res);

input.oninput=_debounce;

回調(diào)函數(shù)的是不是比較簡(jiǎn)單我們來(lái)看下Promise版本的在實(shí)際應(yīng)用的時(shí)候要注意一些坑

functiondebounce(fn,delay,immediate=false){

lettimer=null;

letisInvoke=false;

letresult=null;

const_debounce=function(...args){

//在返回的函數(shù)中直接整體返回一個(gè)Promsie對(duì)象

//將結(jié)果傳入resolve中

returnnewPromise((resolve,rejected)={

if(timer)clearTimeout(timer);

if(immediate!isInvoke){

result=fn.apply(this,args);

resolve(result)

isInvoke=true;

}else{

timer=setTimeout(()={

result=fn.apply(this,args);

resolve(result);

isInvoke=false;

},delay)

_debounce.cancel=function(){

if(timer)clearTimeout(timer);

timer=null;

isInvoke=false;

return_debounce;

實(shí)際調(diào)用

const_debounce=function(...args){

debounce(test,1000).apply(this,args).then(res={

console.log(res);

input.oninput=_debounce;

注意到了吧我們對(duì)原來(lái)的函數(shù)又封裝了一層因?yàn)橹挥羞@樣才能拿到promise的結(jié)果

同時(shí)this和event不會(huì)出問(wèn)題

看到這里的小伙伴們真棒,相信你們防抖函數(shù)一定沒(méi)問(wèn)題了,待會(huì)我們就開(kāi)始講解節(jié)流函數(shù)該如何實(shí)現(xiàn)

節(jié)流函數(shù)的實(shí)現(xiàn)

節(jié)流函數(shù)我們也是從幾個(gè)方面逐步實(shí)現(xiàn),帶著大家一步步的解開(kāi)節(jié)流函數(shù)的面紗.

大家可以想下,節(jié)流函數(shù)該如何實(shí)現(xiàn).

一段時(shí)間內(nèi),只會(huì)觸發(fā)一次操作,后續(xù)的操作就不會(huì)被觸發(fā).

我們可以拿到當(dāng)前的時(shí)間戳來(lái)進(jìn)行計(jì)算

我們直接通過(guò)代碼來(lái)講吧比較方便講

functionthrottle(fn,interval){

letlastTime=0;

const_throttle=function(){

//首先拿到當(dāng)前的時(shí)間

constnowTime=newDate().getTime();

//傳遞進(jìn)來(lái)的時(shí)間間隔用當(dāng)前的時(shí)間減去上一次觸發(fā)的時(shí)間

//得到最新的剩余時(shí)間

constreamainTime=interval-(nowTime-lastTime);

if(reamainTime=0){

fn();

//如果剩余時(shí)間小于0說(shuō)明已經(jīng)達(dá)到一個(gè)間隔

//并且將現(xiàn)在的時(shí)間賦值給lastTime

//在時(shí)間間隔內(nèi)這樣無(wú)論執(zhí)行多少次都只會(huì)執(zhí)行第一次的操作

//因?yàn)榈谝淮蔚膌astTime是0而nowTime是比較大的

//減去之后一定是個(gè)負(fù)數(shù)所以會(huì)執(zhí)行第一次

//而不會(huì)執(zhí)行后續(xù)的操作

lastTime=nowTime;

return_throttle;

大家看下我上面這段代碼還是比較好理解的吧,面試的話能夠?qū)懗鲞@一部分已經(jīng)很可以了,但是要想更加出彩,能和面試官多嘮會(huì)的吧,我們接著看下面的實(shí)現(xiàn)

leading實(shí)現(xiàn)

我們?cè)诨緦?shí)現(xiàn)中,其實(shí)已經(jīng)將這個(gè)功能已經(jīng)實(shí)現(xiàn)了,但是并不是可以控制的,我們這個(gè)實(shí)現(xiàn)是將是否首次觸發(fā)交給用戶來(lái)決定,大家可以想下該如何實(shí)現(xiàn)

基本實(shí)現(xiàn)中,我們是如何實(shí)現(xiàn)第一次觸發(fā)的

是不是通過(guò)拿到的時(shí)間戳非常大,而lastTime為0所導(dǎo)致的呢

所以我們是不是可以讓lastTime也能拿到當(dāng)前的時(shí)間戳呢,這樣子,nowTime和lastTime相減的時(shí)候,是不是就不會(huì)變成負(fù)數(shù)呢

代碼實(shí)現(xiàn)

//考慮到我們后面會(huì)有很多功能要實(shí)現(xiàn)

//所以我們使用選項(xiàng)來(lái)進(jìn)行配置.避免造成更多參數(shù)

functionthrottle(fn,interval,option={leading:true}){

letlastTime=0;

const{leading}=option;

const_throttle=function(){

constnowTime=newDate().getTime();

//在leading和lastTime為false的情況下

//就將nowTime賦值給lastTime,這樣就不會(huì)在第一次就執(zhí)行操作了

if(!leading!lastTime)lastTime=nowTime;

constreamainTime=interval-(nowTime-lastTime);

if(reamainTime=0){

fn();

lastTime=nowTime;

return_throttle;

大家是不是理解了呢我個(gè)人認(rèn)為還是比較好懂的吧,不懂的可以在評(píng)論區(qū)留言,我看到就會(huì)給大家解答的

接下來(lái),我們看下和這個(gè)情況相反的一種狀況,如果我們想要在最后一次操作的時(shí)候進(jìn)行一次觸發(fā)操作的話,該如何去做呢

trailing實(shí)現(xiàn)

這一塊是比較難的部分了,會(huì)有點(diǎn)難,大家不懂的話,要多看幾遍,實(shí)在有不明白的,歡迎評(píng)論區(qū)留言

首先最后一次觸發(fā)操作時(shí),我們?cè)撛趺礃幼屗鼒?zhí)行

我提供一個(gè)思路,當(dāng)我們最后一次觸發(fā)操作的時(shí)候,拿到距離間隔還有多少時(shí)間結(jié)束,加上一個(gè)定時(shí)器,讓他根據(jù)這個(gè)剩余時(shí)間去按時(shí)執(zhí)行

代碼實(shí)現(xiàn)

functionthrottle(fn,interval,option={leading:true,tralling:false}){

letlastTime=0;

lettimer=null;

const{leading,tralling}=option;

const_throttle=function(...args){

constnowTime=newDate().getTime();

if(!leading!lastTime)lastTime=nowTime;

constreamainTime=interval-(nowTime-lastTime);

if(reamainTime=0){

fn.apply(this,args);

lastTime=nowTime;

if(timer){

clearTimeout(timer)

timer=null;

//如果執(zhí)行了這一部分那么后面的tralling就沒(méi)有必要去執(zhí)行

//說(shuō)明剛好執(zhí)行到了這一步后面的最后按下就不需要

return;

if(tralling!timer){

timer=setTimeout(()={

timer=null;

/**`

*首先按下第一次的時(shí)候這個(gè)定時(shí)器已經(jīng)被加上了

*每次進(jìn)來(lái)的時(shí)候等待一定時(shí)間定時(shí)器會(huì)被置空方便下次使用

*根據(jù)剩余時(shí)間來(lái)判斷執(zhí)行

*如果leading為falselastTime會(huì)被設(shè)置為0會(huì)在規(guī)定的剩余時(shí)間到達(dá)后去執(zhí)行這個(gè)函數(shù)而remianTime那個(gè)部分就不會(huì)被執(zhí)行因?yàn)閞emainTime會(huì)一直保持在一個(gè)正數(shù)狀態(tài)

*如果leading為truelastTime會(huì)被設(shè)置為當(dāng)前的時(shí)間這樣在下一次的操作下,remainTime才會(huì)發(fā)生變化

lastTime=!leading0:newDate().getTime();

fn.apply(this,args);

},reamainTime)

return_throttle;

是不是比較難懂呢我在來(lái)解釋一下啊

首先如果remainTime已經(jīng)小于0了,那么fn就會(huì)去執(zhí)行,我們也就不需要去執(zhí)行后續(xù)的操作了會(huì)直接返回

那么如果remainTime沒(méi)有小于0,我們會(huì)設(shè)置定時(shí)器,在定時(shí)器內(nèi)部,我們需要先把timer清空,防止下一次觸發(fā)的時(shí)候又觸發(fā)了.

其次,我們要將lastTime進(jìn)行一個(gè)處理

如果我們之前設(shè)置的leading是false的話,那么我們需要將lastTime置為0,這樣在下一次的觸發(fā)操作的時(shí)候,才能觸發(fā)leading為false的情況下的邏輯語(yǔ)句

leading為true的情況下,需要將lastTime設(shè)置為當(dāng)前的時(shí)間戳,這樣在下一次的操作的時(shí)候,才會(huì)remainTime才會(huì)發(fā)生變化,邏輯才能執(zhí)行下去.

大家有沒(méi)有聽(tīng)明白呢可能是會(huì)有點(diǎn)難懂,但是好好多看幾遍,還是能夠理解的我相信!!!

接下來(lái)的操作就比較簡(jiǎn)單了,大家可以安心食用,和防抖函數(shù)一樣,是取消功能和返回結(jié)果

取消功能和返回結(jié)果

因?yàn)檫@個(gè)和防抖函數(shù)是一樣的,所以我這里直接就放代碼了

functionthrottle(fn,interval,option={leading:true,tralling:false,resultCallback}){

letlastTime=0;

lettimer=null;

letresult=null;

const{leading,tralling,resultCallback}=option;