當Flutter遇到節流與防抖的思路和流程優化

這篇文章主要給大家介紹了關於當Flutter遇到節流與防抖的思路和流程優化的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧

前言

在 Google I/O '17 上，Google 向我們介紹了 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的定時函數。

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

收尾

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對神馬文庫的支持。