基本内容
-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.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一起发布，所以如果你的项目中需要使用这个库，那么你需要命令行切换到项目根路径中执行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
);
}
});
开发过程中也发现很多导致React Native应用频繁崩溃的原因是因为组件被卸载了，但是定时器还处于被激活状态。为了解决这个问题，官方就引入了TimerMixin模块。如果你的应用中需要使用TimerMixin模块，那么代码中例如:setTimeout(fn,500)方法就需要替换成this.setTimeout(fn,500)（只需要添加this.即可）。这样写过后，当然你的组件在被卸载的时候，所有有关定时器相关的事件就会自动清除。
实例:setTimeout和clearTimeout基本用法
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
CustomButton
} from 'react-native';
// import TimerMixin from 'react-timer-mixin';
class Timers extends Component {
// mixins: [TimerMixin]
constructor(props) {
super(props);
this.state={
content:'',
}
}
componentDidMount() {
this.timer_One = setTimeout(
() => {
this.setState({content:'Timer打印的内容:01'})
},
500
);
this.timer_two = setTimeout(
() => {
this.setState({msg:'Timer打印的内容:02'})
},
1000
);
this.timer_shree = setTimeout(
() => {
this.setState({msgs:'Timer打印的内容:03'})
},
1500
);
}
//图形卸载的时候,同时卸载Timers相关事件自动清除:clearTimeout使用
componentWillUnMount() {
this.timer_One && clearTimeout(this.timer_One);
this.timer_two && clearTimeout(this.timer_two);
this.timer_shree && clearTimeout(this.timer_shree);
}
//开始渲染界面
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Timer使用实例,间隔500毫秒打印
</Text>
<Text>{this.state.content}</Text>
<Text>{this.state.msg}</Text>
<Text>{this.state.msgs}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Timers', () => Timers);
效果图:
