當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請求的