RN中的几种定时器

原创 2016年06月01日 17:49:17

第一类,加入定时器中的任务可能会延迟当前正在进行的动画。
1、setTimeout, clearTimeout
2、setInterval, clearInterval
3、setImmediate, clearImmediate
4、requestAnimationFrame, cancelAnimationFrame
使用:在需要的地方或者在componentDidMount 中用前面的方法(分别是setTimeoutsetIntervalsetImmediaterequestAnimationFrame)开启定时器,通常是:

componentDidMount() {
    this.timer = setTimeout(
      () => { console.log('把一个定时器的引用挂在this上'); },
      500
    );
  }
``` 把定时器的引用挂在this上。注意,在组件被销毁的时候晴空定时器:





<div class="se-preview-section-delimiter"></div>

这里写代码片
“`

componentWillUnmount() {
    // 如果存在this.timer,则使用clearTimeout清空。
    // 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
    this.timer && clearTimeout(this.timer);
  }

requestAnimationFrame():在一段时间内只执行一次,在每帧刷新之后执行。
setTimeout():只执行一次,会尽可能快的执行。
setImmediate():只执行一次,立即执行。
setInterval():每隔设定的时间便会执行一次,不是立即执行。

第二类,在稍后执行,不会延迟当前进行的任务。

InteractionManager.runAfterInteractions(() => {
   // ...需要长时间同步执行的任务...
});
版权声明:本文为博主原创文章,未经博主允许不得转载。

《React-Native系列》18、 RN之定时器Timer

在web开发中,我们通常需要使用定时器功能,使用setTimeout和setInterval函数。 那么在ReactNative中,是否也提供了定时器的功能呢? 答案是肯定的。 我们还是先...
  • hsbirenjie
  • hsbirenjie
  • 2016年08月17日 22:07
  • 8034

React中实现定时操作和时间间隔内循环操作

最近,在项目中用到了一个功能,就是进入一个页面,进行数字动态的滚动,当时只顾着去想一些动画的效果了,所以花一点时间,后来自己上网找了一下,发现这个方法挺好的。 1.在一个设定的时间间隔内进行循环的操...
  • qq_30053399
  • qq_30053399
  • 2016年08月14日 15:55
  • 7686

我的第一个RN项目注意事项说明

#TonkinTalent ##下载本项目前,请安装nodejs,安装react-native基础环境,安装facebook最新的yarn管理工具。 1. 采用 git下载本工程,命令行下载如下...
  • wangjuan_01
  • wangjuan_01
  • 2017年03月23日 16:53
  • 687

RN 最容易crash的代码用法及应对措施(持续更新)

变量保护出现最多的就是在使用redux来做数据层,使用this.props的属性没有去查询时候为undefined,这种情况,基本是必crash比如下例://show user name {this....
  • njafei
  • njafei
  • 2017年04月17日 11:14
  • 910

RN实战项目页面导航和启动页面实现(三)

RN实战项目页面导航和启动页面实现(三)RN中处理页面切换可以使用导航器来实现,本项目中用的是Navigator,而官方已经不推荐使用了,而采用新的react-navigation库来替代。 官网 r...
  • qq_28268507
  • qq_28268507
  • 2017年04月11日 11:47
  • 2535

《React-Native系列》18、 RN之定时器Timer

在web开发中,我们通常需要使用定时器功能,使用setTimeout和setInterval函数。 那么在ReactNative中,是否也提供了定时器的功能呢? 答案是肯定的。 我们还是先看...
  • sinat_17775997
  • sinat_17775997
  • 2016年12月18日 17:04
  • 845

RN实现轮播器

ImageData.json { "data": [ { "img" : "goods_161203200655102x", "title" : "开走不谢,快,...
  • callzjy
  • callzjy
  • 2016年12月17日 18:02
  • 939

关于react native 循环动画无法使用InteractionManager的解决办法

最近react native项目中的首页有一个跑马灯的需求,即在轮播图的下方有一个公告,文字能够从左到右循环滚动;于是借助开源的力量,使用了github中的一个module: https://g...
  • Xiongtm
  • Xiongtm
  • 2017年05月12日 09:09
  • 1252

React-Native工程,使用AC-QRCode-RN插件导致其他页面的InteractionManager方法不被执行

现象同事在项目中需要扫描二维码的功能,使用了AC-QRCode-RN(github地址)这个插件,在扫描二维码界面调用该插件之后发现,进入其他页面之后,其他页面中的InteractionManager...
  • SDUST_JSJ
  • SDUST_JSJ
  • 2017年06月12日 16:37
  • 1191

RN自定义倒计时组件

RN自定义倒计时组件
  • DeepLies
  • DeepLies
  • 2016年11月11日 16:27
  • 1390
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:RN中的几种定时器
举报原因:
原因补充:

(最多只允许输入30个字)