前言

在 Google I/O '17 上，Google 向我們介紹了 Flutter —— 一款新的用于創(chuàng)建移動應用的開源庫。

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

Flutter是基于Dart語言編寫的。主要優(yōu)點：

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

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

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

節(jié)流與防抖

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

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

Flutter的節(jié)流

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

放到業(yè)務中分析節(jié)流函數(shù)：

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 {}
 }
}

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

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

Flutter的防抖

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

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

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

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) {
   //限制加節(jié)流
   if (text.trim().length < 5) return;
   setState(() {
   timer?.cancel();
   timer = new Timer(durationTime, () {
    //搜索函數(shù)
   });
   });
  });
 }
}

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

這就是防抖函數(shù)的實際應用。

收尾

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

總結

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