天天看點

防抖和節流

在前端開發過程中,我們經常需要綁定一些持續觸發事件,如:resize、scroll、mousemove等等,但有些時候我們并不希望在事件持續觸發的過程中那麼頻繁的去執行函數。

通常這種情況下,我們怎麼去解決呢?一般來講,防抖和節流是比較好的解決方案。

一、函數的防抖

1、什麼是函數防抖

函數防抖(debounce):就是讓某個函數在上一次執行之後,滿足等待某個時間内不再觸發此函數後再執行,而在這個等待時間内再次觸發函數,等待時間可以重新計算,知道該函數在一定間隔内沒有被調用時,才開始執行被調用方法(

所謂防抖,就是指觸發事件後在 n 秒内函數隻能執行一次,如果在 n 秒内又觸發了事件,則會重新計算函數執行時間。

2、應用場景

使用者注冊時候的手機号驗證和郵箱驗證

搜尋框

3、通用寫法

防抖和節流

去抖案例

4.舉例

應用場景:假設我們網站有個所搜框,使用者輸入文本我們會自動聯想比對出一些結果供使用者選擇。

我們可能首先想到到的做法就是監聽keypress事件,然後異步去查詢結果

這個方法本事是沒有錯的,但是如果使用者快速的輸入一連串字元,假設是10個字元,就會在瞬間觸發了10次請求,這無疑不是我們想要的。

我們想要的是使用者停止輸入的時候才去觸發查詢的請求,這個時候函數防抖可以幫助我們。

防抖和節流

二、函數節流

1、什麼是函數節流

函數節流(throttle):是讓一個函數無法在很短的時間間隔内連續調用,當上一次執行完之後過了規定的時間間隔,才能進行下一次的函數調用。(所謂節流,就是指連續觸發事件但是在N秒中隻執行一次函數)節流會稀釋函數的執行頻率。

即每間隔某個事件去執行某個函數,避免函數的過多執行,這個方式就叫函數節流

window對象的resize、scroll事件

拖拽時候的mousemove

射擊遊戲中的mousedown、keydown事件

文字輸入、自動完成的keyup事件

防抖和節流

4、舉例說明

應用場景:滾動浏覽器滾動條的時候,更新頁面上的某些布局内容或者去調用背景的接口查詢内容的時候

同樣的,如果不對函數調用的頻率加以限制的話,那麼可能我們滾動一次滾動條就會産生N次的調用。

但是這次的情況跟上面的有所不同,我們不是要在每次完成等待某個時間之後才執行函數,而是要每間隔某個時間去執行某個函數,避免函數的過多執行

防抖和節流

可參考版本:

https://www.jianshu.com/p/c8b86b09daf0