關注“前端學苑” ，堅持每天進步一點點

「~函數防抖與節流?~」

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

* 回答面試題的套路

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

2､再說具體的應用場景；

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

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

防抖和節流的產生

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

手寫函數防抖與節流

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

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

代碼如下：

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

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

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

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

參數

1)func[function]:最后要觸發執行的函數；

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

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

主體思路：

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

2、函數節流：

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

代碼如下：

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

參數

func[function]:最后要觸發執行的函數；

wait[number]:觸發的頻率；

應用場景

1、防抖(debounce)

1)每次 resize/scroll 觸發統計事件?(調整窗口大小)；

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

2、節流(throttle)

1)鼠標不斷點擊觸發；

2)監聽滾動事件；

自己的認識與理解：防抖動是將多次執行變為最后一次執行，節流是將多次執行變成每隔一段時間執行。

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

推薦熱門技術文章：

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

• JS基礎進階- 堆棧內存和閉包作用域

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

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

關注「前端學苑」加星標，提升前端技能

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。