微信号:codedev123

介绍:每天推送分享移动开发技术(Android/iOS);React Native技术文章;项目管理;程序猿日常点滴以及精品技术资讯文章.

React Native模块之Timers(定时器)详解

2016-07-02 07:12 江清清

阅读本文大约需要3分钟

     今天主要讲解Timers(定时器)模块,该部分在我们开发中是非常常用的。例如可以实现:秒杀中的倒计时,任务延迟执行等等。


本文所讲知识点

  • 定时器基本内容以及对比

  • InteractionManager(交互管理器)

  • TimerMinxin

  • 定时器相关实例

基本内容

Timers(定时器)是应用中非常重要的部分,在React Native中实现和浏览器一致的Timers。该模块所涉及到相关方法如下:

  • setTimeout,clearTmeout

  • setInterval,clearInterval

  • setImmediate,clearImmediate

  • requestAnimationFrame,cancelAnimationFrame

requestAnimationFrame(fn)和setTimeout(fn,0)方法不一样,前者会在每帧刷新额时候调用一次,而后面的方法会尽可能速度非常快的执行调用(例如在iPhone 5S上面每秒钟会超过1000次的刷新调用)。


setImmediate方法会在JavaScript代码将要执行完毕的时候,在发送批量数据给原生代码之前执行。但是如果在setImmediate回调方法中调用setImmediate方法,那么会立刻进行执行,而不会去返回数据给原生代码。


Promise对象就是使用setImmediate来实现异步调用。


上面我们看了定时器这部分相关的内容,这里我们对于setTimeout和setInterval这两部分内容对一下对比。setTimeout模块调用方式:setTimeout(fn,delay)该表示在运行过程中延迟指定的时间后进行调用方法,该调用的方法只会执行一次。但是setInterval模块调用方式:setInterval(fn,time)该表示在运行过程中每隔指定的时间进行调用方法,该调用方法会执行很多次。这两个效果我们可以相互进行模拟。下面的实例我们会演示相应的效果。

InteractionManager

对于交互管理器,我们在前面的文章已经基本介绍过了。使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行,这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。

在应用开发中我们可以如下进行执行任务


该模块和其他相关的调度方法对比:

  • requestAnimationFrame():执行控制动画效果的代码

  • setImmediate/setTimeout():设置延迟执行任务的时间,该可能会影响到正在执行的动画

  • runAfterInteractions():延迟执行任务,该不会影响到正在执行的动画效果

  • 触摸系统中的单点或者多点触控都是交互动作,耗时任务会在这些触摸交互动作执行完成之后或者取消以后回调runAfterInteractions()方法进行执行。

InteractionManager也允许应用在动画开始的时候通过createInteractionHandle()方法注册动画,在结束的时候清除动画。


runAfterInteractions任务也可以接收一个普通的回调函数或者一个带有gen方法并且返回一个Promise的PromiseTask对象。如果参数是PromiseTask对象,那么任务是异步执行的,也会阻塞。该会等着当前任务执行完毕以后才能执行下一个任务。

      默认情况下,队列任务会一次性在setImmediate方法中批量执行。如果你通过setDealine方法设置一个时间值,那么任务会在延迟该设定值时间进行执行。这时候会调用setTimeout方法进行挂起任务并且阻塞其他任务的执行。这样可以给触摸交互等操作留出时间更好的相应用户操作。

TimerMinxin

在开发过程中也发现很多导致React Native应用频繁崩溃的原因是因为组件被卸载了,但是定时器还处于被激活状态。为了解决这个问题,官方就引入了TimerMixin模块。如果你的应用中需要使用TimerMixin模块,那么代码中例如:setTimeout(fn,500)方法就需要替换成this.setTimeout(fn,500)(只需要添加this.即可)。这样写过后,当然你的组件在被卸载的时候,所有有关定时器相关的事件就会自动清除。

      该库没有和React Native一起发布,所以如果你的项目中需要使用这个库,那么你需要命令行切换到项目根路径中执行npm I react-native-timer-mixin --save命令下载安装即可。官方写的使用该库的实例如下:


使用这个模块方式,我们可以解决掉许多由于应用组件被卸载,定时器产生相关崩溃的bug。

[注意].以上的代码只适合于ES5使用,如果你现在采用ES6进行开发的,那你是无法直接使用TimerMixin的,如果需要在ES6语法中实现,大家可以看一下下面的实例。

实例使用

下面我们通过一个ES6标准的实例进行演示一下定时器的使用方式,具体代码如下:

4.1.setTimeout和clearTimeout基本用法


运行效果:


5.2.setInterval和clearInterval基本用法


运行效果:


最后说两句

      上面的实例主要演示了核心代码,更多详情请大家点击底部阅读原文查看。

      本公众号欢迎大家投稿,如果你希望你的文章可以被更多人看到,直接将md、doc等格式的文章到我邮箱即可(781931404@qq.com),也可以加我QQ/微信(781931404)好友,需要注明(投稿),谢谢。

 
江清清 更多文章 React Native开发技术周报第十五期-好项目,视频教程,原理分析文章来袭... 干货|React Native for Android jsBridge实现原理 干货|速收藏|React Native iOS源码解析篇(二) 超强通用的React Native Tab控制器使用详解-入门篇 超强通用的React Native Tab控制器使用详解-进阶篇
猜您喜欢 2015 GOOGLE I/O大会看点总结:新产品新工具新计划 激动人心|OpenStack社区正式接受UnitedStack有云Steth项目 你是我的背锅侠 《虎妈猫爸》喜迎大结局 腾讯视频11亿收官问鼎 如何简单解释 MapReduce 算法