當Flutter遇到節流與防抖

相信web前端的開發者都或多或少的遇到過節流與防抖的問題。函式節流和函式防抖，兩者都是優化執行**效率的一種手段。在一定時間內，**執行的次數不一定是越多越好。相反，頻繁的觸發或者執行**，會造成大量的重繪等問題，影響瀏覽器或者機器資源。因此把**的執行次數控制在合理的範圍。既能節省瀏覽器cpu資源，又能讓頁面瀏覽更加順暢，不會因為js的執行而發生卡頓。這就是函式節流和函式防抖要做的事。

函式節流是指一定時間內js方法只跑一次。比如人的眨眼睛，就是一定時間內眨一次。

而函式防抖是指頻繁觸發的情況下，只有足夠的空閒時間，才執行**一次。比如生活中的坐公交，就是一定時間內，如果有人陸續刷卡上車，司機就不會開車。只有別人沒刷卡了，司機才開車。

放到業務中分析節流函式：

class mystatefulwidgetstate extends state);
scanning(data);
});} @override
void dispose() 
@override
widget build(buildcontext context) 
//掃面獲取
scanning(goodscode) async );
if (result.result) else {}
}}

解釋一下這段**，因為這個專案是有掃瞄條形碼進行貨物移庫的操作，我們的期望是掃瞄一次，從資料庫中讀取完成增加到列表中乙個貨物。因此，在此之前即使掃瞄也無法讀取。因此我在_barscanner的監聽函式中增加乙個flag標誌位的判斷，這個標誌位用於判斷是否在讀取中，讀取完成後將flag置成true。此時就可以繼續掃瞄。

當然，我這個節流函式並未像有些截留函式那樣帶有明顯的不可觸發時間，這個函式的不可觸發時間為載入的時間。

防抖函式的定義為多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。其原理是對處理函式進行延時操作，若設定的延時到來之前，再次觸發事件，則清除上一次的延時操作定時器，重新定時。

防抖函式多用於處理實時搜尋，拖拽，登入使用者名稱密碼格式驗證。在js的環境中，我們一般使用定時函式settimeout進行防抖處理。同樣的原理，在flutter中，我們會原則定時函式（或者叫延時函式進行處理）。

在乙個輸入框對應的時時搜尋中，我使用了防抖處理：

class mystatefulwidgetstate extends state
@override
void dispose() 
@override
widget build(buildcontext context) );
});});
}}

如**所示，先設定乙個timer物件,當輸入框textfield持續輸入時，會一直觸發timer物件的cancel事件，既取消，然後會重新給timer賦值新的週期為3s的定時函式。當3s中內不輸入資訊時，這個定時函式會觸發。但是三秒鐘內再次輸入，這個定時函式又會被取消然後賦值新的週期為3s的定時函式。

這就是防抖函式的實際應用。

我們在js的**中會經常接觸到函式節流與防抖，是因為在js中，dom操作(onresize, onscroll等等操作)是最消耗效能的，但是一些場景中同一事件會多次觸發，為了減少操作，從而有了防抖和節流的概念。其實在很多開發中，我們還是可以使用防抖和節流減少不必要的一些操作和ajax請求的。

當Flutter遇到節流與防抖

節流與防抖

防抖與節流

節流與防抖

相關推薦