關(guān)注“前端學(xué)苑” ，堅持每天進步一點點

「~函數(shù)防抖與節(jié)流?~」

每日一題，希望讓愛學(xué)習(xí)、思考的前端技術(shù)伙伴在一起學(xué)習(xí)、復(fù)盤、成長。?基礎(chǔ)知識要夯實，原理源碼要深入，深度廣度要擴展，堅持每天進步一點點，每天有所收獲。進大廠是最終目標(biāo) ?

* 回答面試題的套路

1､先說這個點的明確定義，或者是特性；

2､再說具體的應(yīng)用場景；

3､說說自己的看法、觀點；

4､可以稍微舉一反三，說說同類特性，或者類似的框架，更好的方案。

防抖和節(jié)流的產(chǎn)生

瀏覽器的resize、scroll、keypress、mousemove操作時會頻繁觸發(fā)，如果我們在回調(diào)中計算元素位置、做一些跟DOM相關(guān)的操作，引起瀏覽器回流和重繪，頻繁觸發(fā)回調(diào)，很可能會造成瀏覽器掉幀，甚至?xí)篂g覽器崩潰，影響用戶體驗。針對這種現(xiàn)象，目前有兩種常用的解決方案：防抖和節(jié)流。

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

1、函數(shù)的防抖(防止老年帕金森)

對于頻繁觸發(fā)某個操作，我們只識別一次(只觸發(fā)執(zhí)行一次函數(shù))。

代碼如下：

function?debounce(func,?wait?=?300,?immediate?=?false)?{
????let?timer?=?null;
????return?function?anonymous(...params)?{
????????let?now?=?immediate?&&?!timer;

????????//?每次點擊都把之前設(shè)置的定時器清除
????????clearTimeout(timer);

????????//?重新設(shè)置一個新的定時器監(jiān)聽wait時間內(nèi)是否觸發(fā)第二次
????????timer?=?setTimeout(()?=>?{
????????????//?手動讓其回歸到初始狀態(tài)
????????????timer?=?null;
????????????//?wait這么久的等待中，沒有觸發(fā)第二次
????????????!immediate???func.call(this,?...params)?:?null;
????????},?wait);

????????//?如果是立即執(zhí)行
????????now???func.call(this,?...params)?:?null;
????};
}

參數(shù)

1)func[function]:最后要觸發(fā)執(zhí)行的函數(shù)；

2)wait[number]:“頻繁”設(shè)定的界限；

3)immediate[boolean]:默認多次操作，我們識別的是最后一次，但是immediate=true，讓其識別第一次；

主體思路：

在當(dāng)前點擊完成后，我們等wait這么長的時間，看是否還會觸發(fā)第二次，如果沒有觸發(fā)第二次，屬于非頻繁操作，我們直接執(zhí)行想要執(zhí)行的函數(shù)func；如果觸發(fā)了第二次，則以前的不算了，從當(dāng)前這次再開始等待...

2、函數(shù)節(jié)流：

在一段頻繁操作中，可以觸發(fā)多次，但是觸發(fā)的頻率由自己指定。

代碼如下：

function?throttle(func,?wait?=?300)?{
????let?timer?=?null,
????????previous?=?0;?//?記錄上一次操作的時間
????return?function?anonymous(...params)?{
????????let?now?=?new?Date(),
????????????remaining?=?wait?-?(now?-?previous);?//記錄還差多久達到我們一次觸發(fā)的頻率
????????if?(remaining?<=?0)?{
????????????//?兩次操作的間隔時間已經(jīng)超過wait了
????????????window.clearTimeout(timer);
????????????timer?=?null;
????????????previous?=?now;
????????????func.call(this,?...params);
????????}?else?if?(!timer)?{
????????????//?兩次操作的間隔時間還不符合觸發(fā)的頻率
????????????timer?=?setTimeout(()?=>?{
????????????????timer?=?null;
????????????????previous?=?new?Date();
????????????????func.call(this,?...params);
????????????},?remaining);
????????}
????};
}

參數(shù)

func[function]:最后要觸發(fā)執(zhí)行的函數(shù)；

wait[number]:觸發(fā)的頻率；

應(yīng)用場景

1、防抖(debounce)

1)每次 resize/scroll 觸發(fā)統(tǒng)計事件?(調(diào)整窗口大小)；

2)文本輸入的驗證，連續(xù)輸入文字后發(fā)送 AJAX 請求進行驗證，驗證一次就好。(keyup 事件)；

2、節(jié)流(throttle)

1)鼠標(biāo)不斷點擊觸發(fā)；

2)監(jiān)聽滾動事件；

自己的認識與理解：防抖動是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行，節(jié)流是將多次執(zhí)行變成每隔一段時間執(zhí)行。

* 可以在留言區(qū)寫下你的答案，一起成長進大廠。

推薦熱門技術(shù)文章：

JS第一座大山：堆棧內(nèi)存和閉包作用域?(想深入看這里)

• JS基礎(chǔ)進階- 堆棧內(nèi)存和閉包作用域

• JS基礎(chǔ)進階- 閉包作用域和JS高階編程技巧

覺得本文對你有幫助？請分享給更多人

關(guān)注「前端學(xué)苑」加星標(biāo)，提升前端技能

如果覺得這篇文章還不錯，來個【分享、點贊、在看】三連吧，讓更多的人也看到~

總結(jié)

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

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