Flutter中節流與防抖的示例分析

這篇文章主要介紹了Flutter中節流與防抖的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前言

Flutter是什么呢?它是Google使用Dart語言開發的移動應用開發框架，用來幫助開發者在iOS和Android平臺上開發高性能、高質量的原生應用。Flutter是跨平臺的免費開源UI框架，iOS和Android可以共用一套代碼。

Flutter是基于Dart語言編寫的。主要優點：

免費開源
利用保持狀態的熱重載（Hot Reload）、全新的響應式框架、豐富的控件以及集成的開發工具這些特點進行快速開發。
通過可組合的控件集合、豐富的動畫庫以及分層可擴展的架構來實現富有感染力的靈活界面設計。
借助可移植的 GPU 加速的渲染引擎以及高性能本地 ARM 代碼運行時以達到跨設備跨平臺的高質量用戶體驗。
提高效率：使用一套代碼同時開發Android和iOS。
可擴展性很強：Flutter框架本身提供了豐富的Material Design和Cupertino(iOS-flavor)風格的控件，可自由擴展控件不受手機平臺控件的限制。

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

在最近由我為國內某航空開發的某空貨管理App中，簡單的使用了一下關于節流與防抖的思路對流程進行了優化。

節流與防抖

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

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

Flutter的節流

函數節流，簡單地講，就是讓一個函數無法在很短的時間間隔內連續調用，只有當上一次函數執行后過了你規定的時間間隔，才能進行下一次該函數的調用。

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

class MyStatefulWidgetState extends State<OrderPageEdit> {
 bool canScanning; //是否可以掃描
 //掃描控制流
 final Stream<dynamic> _barScanner =
  EventChannel('com.freshport.freshport/barcode').receiveBroadcastStream();
 StreamSubscription<dynamic> _barScannerSubscription;

 @override
 void initState() {
 super.initState();
 _barScannerSubscription = _barScanner.listen((data) {
  if (!canScanning) return;
  setState(() {
  canScanning = false;
  });
  scanning(data);
 });
 }

 @override
 void dispose() {
 _barScannerSubscription.cancel();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return Widget;
 }

 //掃面獲取
 scanning(goodsCode) async {
 final result = await fetch.fetch(url: 'www.nicai.com');
 setState(() {
  canScanning = true;
 });
 if (result.result) {
 } else {}
 }
}

解釋一下這段代碼，因為這個項目是有掃描條形碼進行貨物移庫的操作，我們的期望是掃描一次，從數據庫中讀取完成增加到列表中一個貨物。因此，在此之前即使掃描也無法讀取。因此我在_barScanner的監聽函數中增加一個flag標志位的判斷，這個標志位用于判斷是否在讀取中，讀取完成后將flag置成true。此時就可以繼續掃描。

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

Flutter的防抖

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

防抖函數多用于處理實時搜索，拖拽，登錄用戶名密碼格式驗證。在js的環境中，我們一般使用定時函數setTimeout進行防抖處理。同樣的原理，在Flutter中，我們會原則定時函數（或者叫延時函數進行處理）。

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

class MyStatefulWidgetState extends State<GoodsCodeList> {
 //檢索輸入
 final TextEditingController _textController = TextEditingController();
 //設置防抖周期為3s
 Duration durationTime = Duration(seconds: 3);
 Timer timer;

 @override
 void initState() {
 super.initState();
 }

 @override
 void dispose() {
 _textController.clear();
 timer?.cancel();
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return TextField(
  controller: _textController,
  decoration: InputDecoration(
   contentPadding: EdgeInsets.all(5.0),
   hintText: "請輸入商品編碼",
   prefixIcon: Icon(Icons.search, color: Colors.black),
   focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.black),
   ),
   border:
    OutlineInputBorder(borderRadius: BorderRadius.circular(3.0))),
  onChanged: (String text) {
   //限制加節流
   if (text.trim().length < 5) return;
   setState(() {
   timer?.cancel();
   timer = new Timer(durationTime, () {
    //搜索函數
   });
   });
  });
 }
}

如代碼所示，先設置一個 Timer 對象,當輸入框TextField持續輸入時，會一直觸發 Timer對象的cancel事件，既取消，然后會重新給Timer賦值新的周期為3s的定時函數。當3s中內不輸入信息時，這個定時函數會觸發。但是三秒鐘內再次輸入，這個定時函數又會被取消然后賦值新的周期為3s的定時函數。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Flutter中節流與防抖的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!