前言

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

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

Flutter是基于Dart語(yǔ)言編寫(xiě)的。主要優(yōu)點(diǎn)：

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

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

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

節(jié)流與防抖

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

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

Flutter的節(jié)流

函數(shù)節(jié)流，簡(jiǎn)單地講，就是讓一個(gè)函數(shù)無(wú)法在很短的時(shí)間間隔內(nèi)連續(xù)調(diào)用，只有當(dāng)上一次函數(shù)執(zhí)行后過(guò)了你規(guī)定的時(shí)間間隔，才能進(jìn)行下一次該函數(shù)的調(diào)用。

放到業(yè)務(wù)中分析節(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 {}
 }
}

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

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

Flutter的防抖

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

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

在一個(gè)輸入框?qū)?yīng)的時(shí)時(shí)搜索中，我使用了防抖處理：

class MyStatefulWidgetState extends State<GoodsCodeList> {
 //檢索輸入
 final TextEditingController _textController = TextEditingController();
 //設(shè)置防抖周期為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: "請(qǐng)輸入商品編碼",
   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ù)
   });
   });
  });
 }
}

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

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

收尾

我們?cè)趈s的代碼中會(huì)經(jīng)常接觸到函數(shù)節(jié)流與防抖，是因?yàn)樵趈s中，DOM操作(onresize, onscroll等等操作)是最消耗性能的，但是一些場(chǎng)景中同一事件會(huì)多次觸發(fā)，為了減少操作，從而有了防抖和節(jié)流的概念。其實(shí)在很多開(kāi)發(fā)中，我們還是可以使用防抖和節(jié)流減少不必要的一些操作和ajax請(qǐng)求的。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論