React-Native之定时器Timer的实现代码


Posted in Javascript onOctober 04, 2017

在web开发中,我们通常需要使用定时器功能,使用setTimeout和setInterval函数。

那么在ReactNative中,是否也提供了定时器的功能呢? 答案是肯定的。

我们还是先看看官网怎么说的。

定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。

提供的方法如下:

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

setTimeout (fn, 1000)  和 setInterval (fn,1000)

和web中的意思一样,前者表示延迟1000毫秒后执行 fn 方法 ,后者表示每隔1000毫秒执行 fn 方法。

requestAnimationFrame(fn)和setTimeout(fn, 0)不同,前者会在每帧刷新之后执行一次,而后者则会尽可能快的执行(在iPhone5S上有可能每秒1000次以上)。

setImmediate则会在当前JavaScript执行块结束的时候执行,就在将要发送批量响应数据到原生之前。注意如果你在setImmediate的回调函数中又执行了setImmediate,它会紧接着立刻执行,而不会在调用之前等待原生代码。

Promise的实现就使用了setImmediate来执行异步调用。

InteractionManager(交互管理器)

原生应用感觉如此流畅的一个重要原因就是在互动和动画的过程中避免繁重的操作。在React Native里,我们目前受到限制,因为我们只有一个JavaScript执行线程。不过你可以用InteractionManager来确保在执行繁重工作之前所有的交互和动画都已经处理完毕。

应用可以通过以下代码来安排一个任务,使其在交互结束之后执行:

InteractionManager.runAfterInteractions(() => { 
  // ...需要长时间同步执行的任务... 
});

我们来把它和之前的几个任务安排方法对比一下:

requestAnimationFrame(): 用来执行在一段时间内控制视图动画的代码

setImmediate/setTimeout/setInterval(): 在稍后执行代码。注意这有可能会延迟当前正在进行的动画。

runAfterInteractions(): 在稍后执行代码,不会延迟当前进行的动画。
触摸处理系统会把一个或多个进行中的触摸操作认定为'交互',并且会将runAfterInteractions()的回调函数延迟执行,直到所有的触摸操作都结束或取消了。

InteractionManager还允许应用注册动画,在动画开始时创建一个交互“句柄”,然后在结束的时候清除它。

var handle = InteractionManager.createInteractionHandle(); 
// 执行动画... (`runAfterInteractions`中的任务现在开始排队等候) 
// 在动画完成之后 
InteractionManager.clearInteractionHandle(handle); 
// 在所有句柄都清除之后,现在开始依序执行队列中的任务

TimerMixin

我们发现很多React Native应用发生致命错误(闪退)是与计时器有关。具体来说,是在某个组件被卸载(unmount)之后,计时器却仍然被激活。为了解决这个问题,我们引入了TimerMixin。如果你在组件中引入TimerMixin,就可以把你原本的setTimeout(fn, 500)改为this.setTimeout(fn, 500)(只需要在前面加上this.),然后当你的组件卸载时,所有的计时器事件也会被正确的清除。

这个库并没有跟着React Native一起发布。你需要在项目文件夹下输入npm i react-timer-mixin --save来单独安装它。

var TimerMixin = require('react-timer-mixin'); 
 
var Component = React.createClass({ 
 mixins: [TimerMixin], 
 componentDidMount: function() { 
  this.setTimeout( 
   () => { console.log('这样我就不会导致内存泄露!'); }, 
   500 
  ); 
 } 
});

我们强烈建议您使用react-timer-mixin提供的this.setTimeout(...)来代替setTimeout(...)。这可以规避许多难以排查的BUG。

译注:Mixin属于ES5语法,对于ES6代码来说,无法直接使用Mixin。

如果你的项目是用ES6代码编写,同时又使用了计时器,那么你只需铭记在unmount组件时清除(clearTimeout/clearInterval)所有用到的定时器。

那么也可以实现和TimerMixin同样的效果。例如:

import React,{ 
 Component 
} from 'react-native'; 
 
 
export default class Hello extends Component { 
 componentDidMount() { 
  this.timer = setTimeout( 
   () => { console.log('把一个定时器的引用挂在this上'); }, 
   500 
  ); 
 } 
 componentWillUnmount() { 
  // 如果存在this.timer,则使用clearTimeout清空。 
  // 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear 
  this.timer && clearTimeout(this.timer); 
 } 
};

注意点:

1、定时器功能比较简单,注意在es6中使用时,需铭记在unmount组件时清除(clearTimeout/clearInterval)所有用到的定时器。
2、可以使用定时器实现一些普通功能:如短信倒计时等
3、对于一些需要延迟执行的特殊场景也可以使用Timer,譬如:目前RN提供的fetch是没有提供设置超时时间的,如果客户端请求后端的一个接口,接口超时了(后端服务设置的超时时间为10s),那么RN界面就一直loading,也不能aborded。那么这时候我们就可以巧妙的使用计时器,如果客户端发出的Request,时间大于某个值(5秒),那么我们直接认为请求失败。
4、今天还发现一个使用setTimeout的场景,在列表页加载下一页的时候,如果接口响应很快,就不会出现loading的效果,这个时候为了有loading的效果,设置一个500毫秒的延时,呵呵....

参考:http://reactnative.cn/docs/0.31/timers.html#content

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
Javascript中With语句用法实例
May 14 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 #Javascript
You might like
php 将excel导入mysql
2009/11/09 PHP
use jscript List Installed Software
2007/06/11 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
JSON 数据格式详解
2017/09/13 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python实现发送邮件功能代码
2017/12/14 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python简易远程控制单线程版
2018/06/20 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python os.rename实例用法详解
2020/12/06 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
安踏官方商城:anta.cn
2019/12/16 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
对公司合理化的建议书
2014/03/12 职场文书
导师推荐信范文
2014/05/09 职场文书
植物生产学专业求职信
2014/08/08 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS