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

一、简介

定时器在需求中也是一个常见的部分，例如在间隔时间内循环执行某些业务或者定时推送消息等。ReactNative中提供了三种定时器API，分别是setTimeout、setInterval、setImmediate。它们都是遵循浏览器API标准实现的，但是作用也略有不同。

二、API

1、setTimeout：主要用于设定一个定时任务，只会执行一次。在达到某个时间点时开始执行此任务， 例如打开APP 5秒后开始获取用户的位置信息。

//定时器对应的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

2、setInterval：主要用于设定循环执行的任务。以某个时间段为间隔，不停地执行此任务，例如，轮播图。

//定时器对应的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

3、setImmediate：主要用于设定立即执行的任务，只会执行一次。函数一旦调用，立马执行此任务，例如程序一启动，就开始推送消息给用户。

//设定定时器对象，只有一个参数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);