當Flutter遇到節流與防抖

lunlunshiwo發表於2019-01-07
Flutter

相信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請求的

相關文章