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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
一个分页的论坛
2006/10/09 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
Joomla开启SEF的方法
2016/05/04 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Python使用numpy实现BP神经网络
2018/03/10 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
物理教学随笔感言
2014/02/22 职场文书
小学生开学感言
2014/02/28 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
委托书的样本
2015/01/28 职场文书
滴水洞导游词
2015/02/10 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
Python四款GUI图形界面库介绍
2022/06/05 Python
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers