Timers之基础篇
来源:互联网 发布:知乎怎么看阅读量 编辑:程序博客网 时间:2024/05/17 21:54
(一)前言
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)该表示在运行过程中每隔指定的时间进行调用方法,该调用方法会执行很多次。这两个效果我们可以相互进行模拟。下面的实例我们会演示相应的效果。
setImmediate模块调用方式:setImmediate(fn),该用于延迟调用fn方法。该用于把调用事件会插入到事件队列尾部,主线程和事件队列的函数执行完成之后会立即调用setImmediate指定的回调方法。
(三)InteractionManager(交互管理器)
对于交互管理器,我们在前面的文章已经基本介绍过了。使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行,这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。
在应用开发中我们可以如下进行执行任务
InteractionManager.runAfterInteractions(() => {
//执行耗时的同步任务
});
该模块和其他相关的调度方法对比:
- requestAnimationFrame():用来执行在一段时间内控制视图动画的代码
- setImmediate/setTimeout():设置延迟执行任务的时间,该可能会影响到正在执行的动画
- runAfterInteractions():延迟执行任务,该不会影响到正在执行的动画效果
触摸系统中的单点或者多点触控都是交互动作,耗时任务会在这些触摸交互动作执行完成之后或者取消以后回调runAfterInteractions()方法进行执行。
InteractionManager也允许应用在动画开始的时候通过createInteractionHandle()方法注册动画,在结束的时候清除动画。
var handle = InteractionManager.createInteractionHandle();
//执行动画 (`runAfterInteractions` tasks are queued)
//动画执行结束
InteractionManager.clearInteractionHandle(handle);
//动画清除之后,开始直接runAfterInteractions中的任务
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命令下载安装即可。官方写的使用该库的实例如下:
import TimerMixin from 'react-timer-mixin'; var Component = React.createClass({ mixins: [TimerMixin], componentDidMount: function() { this.setTimeout( () => { console.log('I do not leak!'); }, 500 ); }});
使用这个模块方式,我们可以解决掉许多由于应用组件被卸载,定时器产生相关崩溃的bug。
[注意].以上的代码只适合于ES5使用,如果你现在采用ES6进行开发的,那你是无法直接使用TimerMixin的,如果需要在ES6语法中实现,大家可以看一下下面的实例。
(五)使用实例
下面我们通过一个ES6标准的实例进行演示一下定时器的使用方式,具体代码如下:
5.1.setTimeout和clearTimeout基本用法
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View,} from 'react-native';class TimersDemo extends Component { constructor(props) { super(props); this.state={ content:'', } } componentDidMount() { this.timer = setTimeout( () => { this.setState({content:'我是定时器打印的内容...One'}) }, 500 ); this.timer_two = setTimeout( () => { this.setState({msg:'我是定时器打印的内容...Two'}) }, 1000 ); } componentWillUnmount() { this.timer && clearTimeout(this.timer); this.timer_two && clearTimeout(this.timer_two); } render() { return ( <View style={{margin:20}}> <Text style={styles.welcome}> 定时器实例 </Text> <Text>{this.state.content}</Text> <Text>{this.state.msg}</Text> </View> ); }}const styles = StyleSheet.create({ welcome: { fontSize: 20, textAlign: 'center', margin: 10, },}); AppRegistry.registerComponent('TimersDemo', () => TimersDemo);
运行效果:
5.2.setInterval和clearInterval基本用法
<CustomButton text='测试setInterval' onPress={()=>{ this.interval=setInterval(() => {this.setState({sum:(this.state.sum+1)}); },400); }}/><CustomButton text='clearInterval' onPress={()=>{ this.interval && clearInterval(this.interval); }}/>
运行效果:
(六)最后总结
今天我们主要讲解了Timer定时器基本使用方法,该使用比较简单,就是一些注意点平时开发中多多注意一下就行了。
示例
原链接
- Timers之基础篇
- Qt之Timers
- Timers
- JMeter Test Plan的组成部分之Timers
- System.Timers
- Multimedia Timers
- jQuery Timers
- Creating Timers
- .Net Timers
- Server Timers, Windows Timers, and Thread Timers的对比
- The differen between Server Timers, Windows Timers, and Thread Timers
- 5 kinds of timers
- dynamic timers 的list
- System.Timers.Timer
- Jquery Timers 插件
- System.Timers.Timer用法
- 关于System.Timers.Timer
- jquery.timers使用说明
- 插入排序
- YARN搭建与启动
- Linux 安装Apache 记录
- 数据库连接池(5)其他数据库连接池
- Tomcat
- Timers之基础篇
- 以面向对象思想写一个js函数
- 指针的类型 指针所指向 指向指针的引用
- 织梦模板下载:驾驶学校汽车类行业网站织梦模板
- 汇编常用指令笔记
- 旋转会对unity中物体的transform.forward的值产生影响
- 第二代MapReduce阶段解析
- sxt6.24
- Android屏幕适配