ReactNative: 定时器setTimeout、setInterval、setImmediate的使用

//定时器对应的ID
declare opaque type TimeoutID;

//根据ID清除对应的定时器
declare function clearTimeout(timeoutId?: TimeoutID): void;

//设定定时器，返回对应的ID
//callback是定时器内的执行函数
//ms是时间片，毫秒
declare function setTimeout<TArguments: Array<mixed>>(
  callback: (...args: TArguments) => mixed,
  ms?: number,
  ...args: TArguments
): TimeoutID

//定时器对应的ID
declare opaque type IntervalID;

//根据ID清除对应的定时器
declare function clearInterval(intervalId?: IntervalID): void;

//设定定时器，返回对应的ID
//callback是定时器内的执行函数
//ms是时间片，毫秒
declare function setInterval<TArguments: Array<mixed>>(
  callback: (...args: TArguments) => mixed,
  ms?: number,
  ...args: TArguments
): IntervalID

//设定定时器对象，只有一个参数callback为执行体函数
declare function setImmediate(callback: ((...args: Array<any>) => mixed), ...args: Array<any>): Object;

//移除定时器对象
declare function clearImmediate(immediateObject: any): Object;

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    TouchableHighlight,
    View
} from ‘react-native‘;

export default class App extends Component {

    constructor(){
        super();
        this.state = {count:0};
    }


    //事件
    _event1(){

        //1秒后执行callback, 只会执行一次
        const timeoutID = setTimeout(()=>{

            //执行
            alert("1秒时间到了，开始执行");

            //清除
            clearTimeout(timeoutID);

        }, 1000)
    }

    _event2(){

        //每间隔1秒执行callback，会不停地执行
        const intervalID = setInterval(() => {

            //累计
            this.setState({ count: this.state.count+1});

            //移除
            if (this.state.count === 3){
                alert("count==3，移除定时器");
                clearInterval(intervalID);
                this.setState({ count: 0});
            }

        }, 1000)
    }

    _event3(){

        //立即执行, 只执行一次
        const object = setImmediate(()=>{

            //执行
            alert("立即执行");

            //移除
            clearImmediate(object);
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight onPress={this._event1.bind(this)}>
                    <Text style={{color:‘red‘, fontSize:25}}>setTimeout</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._event2.bind(this)}>
                    <Text style={{color:‘red‘, marginTop:30, fontSize:25}}>setInterval{":"+this.state.count}</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._event3.bind(this)}>
                    <Text style={{color:‘red‘, marginTop:30, fontSize:25}}>setImmediate</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#F5FCFF‘,
    }
});

AppRegistry.registerComponent(‘App‘, () => App);