Flutter延时任务、Flutter通过Future与Timer实现延时任务

简介: 本文是异步编程的延时策略篇章,在Flutter中实现延时操作有两种方式,一种是通过Future,另一种是通过Timer。

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天。

Flutter延时任务、Flutter通过Future与Timer实现延时任务@凡科快图.png

Header1 Header2
CSDN 网易云课堂教程
掘金 EDU学院教程
知乎 Flutter系列文章

本文是异步编程的延时策略篇章,在Flutter中实现延时操作有两种方式,一种是通过Future,另一种是通过Timer。


1 Future

在Flutter中实现延时 1秒的操作,使用Fluture来实现,代码如下:

    ///代码清单 1-1 
    ///方式一
    ///参数一 延时的时间
    ///参数二 延时执行的方法
    Future.delayed(Duration(milliseconds: 1000), () {
      print("延时1秒执行");
    });
    ///代码清单 1-2
    ///方式二
    Future.delayed(Duration(milliseconds: 1000)).whenComplete((){
      print("延时1秒执行 whenComplete ");
    });
    ///代码清单 1-3
    ///方式二
    Future.delayed(Duration(milliseconds:1000)).then((value){
      print("延时1秒执行 then ");
    });

在上述代码清单 1-1、1-2、1-3中分别展示了使用Future的延时操作的三种方式,这三种方式 是小编实现延时操作的一些思路,一般建议使用代码清单1-1中所示的第一种,对于代码清单1-2与1-3中所示的whenComplete与then函数,功能更强大,应当用到合适的位置。

Future的then函数返回值类型为一个Future对象,所以支持链式调用,组合在一起就是串行方式调用,如下代码块 1-4 中所示:

    ///代码清单 1-4
    Future.delayed(Duration(milliseconds: 1000), () {
      print("延时1秒执行");
      return Future.value("测试数据");
    }).then((value) {//函数一
      print(" then  $value");
      return Future.value("测试数据 2");
    }).then((value) {///函数二
      print(" then  $value");
      return Future.value("测试数据 2");
    }).then((value) {//函数三
      ///value 就是 函数一中回传的值
      print(" then  $value");
    });

假如在then函数中任何一个环节出现了异常,那么后续的函数将会被中断执行(如清单1-4中的then函数一出现了问题,then函数二与三就都不会执行)相当于是程序线程停止在这里了,对于手机界面来讲就是无响应或者是红屏显示。

在代码清单1-3中所示的whenComplete方法,并返回一个Future,类似于try-catch-finally中的finally块,所以用whenComplete来结尾多个异步操作是一个合适的解决方案,如下代码清单1-5所示

/// 代码清单 1-5
    Future.delayed(Duration(milliseconds: 1000), () {
      print("延时1秒执行");
      return Future.value("测试数据");
    }).then((value) {//函数一
      print(" then  $value");
      return Future.value("测试数据 2");
    }).then((value) {///函数二
      print(" then  $value");
      throw 'Error!';
      return Future.value("测试数据 3");
    }).then((value) {//函数三
      ///value 就是 函数一中回传的值
      print(" then  $value");
    }).catchError((err) {
      print('Caught $err'); // Handle the error.
    },test: (e){
      print('Caughte  $e'); // Han
      return e is String;
    }).whenComplete((){
      print("程序执行完成");
    });

在代码清单 1-5中也使用到了catchError函数,在这里,当then这几个函数中任何一个处理出现 异常,都会回调此方法,如这里在函数二中通过 throw抛出的一个异常,在catchError函数中捕捉到这个异常,然后回调test方法块,再回调catchError的参数一的函数处理,类似try-catch-finally中的catch,它的定义如下代码清单1-6所示:

/// 代码清单 1-6
  Future<T> catchError(Function onError, {bool test(Object error)});

2 Timer

通过Timer来实现延时2秒的操作,如下代码清单 2-1 所示:

    ///延时2秒
    Timer timer =  new Timer(Duration(milliseconds: 2000), (){

    });

相比来讲 Future中实现的延时操作也是通过Timer来实现的,在实际开发中,如果只是一个单纯的延时操作,小编建议使用Timer,如下代码清单2-2所示,在当前Widget销毁时取消延时任务,可避免内存泄漏。

class _TimerDelayedTestPageState extends State{
  ///声明
  Timer timer;
  @override
  void initState() {
    super.initState();
    ///延时2秒
     timer =  new Timer(Duration(milliseconds: 2000), (){

    });
  }
  @override
  void dispose() {
    ///取消延时任务
    timer.cancel();
    super.dispose();
   }
    ... ... 
 }

完毕
公众号 我的大前端生涯

相关文章
|
JSON Dart IDE
Flutter实现国际化
开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐进行国际化开发
892 0
Flutter实现国际化
Flutter延迟执行一段代码的几种方式以及Timer的说明
Flutter延迟执行一段代码的几种方式以及Timer的说明
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
Flutter 底部导航栏BottomNavigationBar,并关联PageView实现滑动切换
308 0
|
Dart IDE 开发工具
Flutter 图文并茂列表实现
Flutter使用 ListView 完成列表的构建,界面实现的关键工作实际是布局子元素的拆分。剩下的实现方式存在多种,看各人喜好。但是,需要注意避免过多嵌套导致代码不好维护,并需要提高复用性。
808 2
Flutter 图文并茂列表实现
|
数据安全/隐私保护 UED
Flutter 使用自定义fluro 路由实现访问权限控制
本篇介绍了利用 Fluro 路由管理实现路由权限拦截的两种方式,两种方式各有好处,使用过程中可以根据实际情况决定使用哪一种方法。
523 1
Flutter 使用自定义fluro 路由实现访问权限控制
|
存储 数据安全/隐私保护
Flutter App页面路由及路由拦截实现
直接使用页面跳转会带来诸多缺陷,通过路由管理可以降低页面耦合,提高代码的可维护性和权限控制。本篇介绍了 Flutter 的路由管理和拦截实现。
1141 1
Flutter App页面路由及路由拦截实现
|
存储 前端开发
Flutter 实现多选底部弹窗
本篇介绍了底部弹窗实现多选的方式,其中实现的方式还可以有很多种,例如直接在自定义组件中使用有状态组件。这里介绍的方法可以作为一个参考,通过动态构建有状态组件能够简单快速地实现底部弹窗的多选功能。
621 0
Flutter 实现多选底部弹窗
|
前端开发 API Android开发
Flutter实现动画
对于一个前端的App来说,添加适当的动画,可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android,还是前端开发中都会提供完成某些动画的API。 Flutter有自己的渲染闭环,我们当然可以给它提供一定的数据模型,来让它帮助我们实现对应的动画效果。
175 0
Flutter实现动画
Flutter:实现红包晃动效果
很多app打开会有红包悬浮在某个角落,然后为了吸引注意力,会将红包晃动起来,这个效果非常简单
277 0
|
前端开发
在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。
为避免贴大段代码,文中代码部分仅作为参考,并非全部代码,请理解后自行补全或者下载源码进行学习。
231 0
在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。