一、简介
定时器在需求中也是一个常见的部分,例如在间隔时间内循环执行某些业务或者定时推送消息等。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);
原文地址:https://www.cnblogs.com/XYQ-208910/p/12200466.html
时间: 2024-10-08 10:42:03