ReactNative: 定时器setTimeout、setInterval、setImmediate的使用
时间:2020-01-16
本文章向大家介绍ReactNative: 定时器setTimeout、setInterval、setImmediate的使用,主要包括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);
原文地址:https://www.cnblogs.com/XYQ-208910/p/12200466.html
- HDU----(4519)郑厂长系列故事——体检
- 张戈博客成功启用移动端主题:Mobile Pack
- Oracle数据库性能障碍分析利器:SYSTEMSTATE DUMP介绍
- hdu ---(4517)小小明系列故事——游戏的烦恼(Dp)
- HTTP加速器varnish安装小记(1)
- 手把手教你估算深度神经网络的最优学习率(附代码&教程)
- 批处理判断第一个硬盘的最后一个分区并进入
- MVCC原理探究及MySQL源码实现分析
- 关于热点数据导出与加载的影响,多的是你不知道的事
- 【Python】30行代码教你将微信变成智能回复机器人
- 【python爬虫】知乎互联网话题问答内容可视化分析
- “mysqlbinlog”工具做binlog server靠谱吗?
- 看各路神仙如何大战MySQL insecure warning报警有感
- 由optimizer_switch所引起的诡异问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mybatis-generator在命令行及IDEA中的使用
- 70-STM32+ESP8266+AIR202基本控制篇-移植使用-移植单片机MQTT底层包到自己的工程项目
- springboot研究:springboot自带监控actuator
- springboot研究:springboot使用swagger自动构建api
- numpy/pandas瞎搞系列(一):OLS,WLS的numpy实现
- redis实战第三篇 redis sentinel安装和部署
- 后浪,谈谈你对jvm性能调优的理解
- Homer预测共表达基因的motif
- redis实战第一篇 安装和使用
- lombok在java项目中的使用
- MySQL 的全文索引.
- Swift Reusable开源库使用
- 面试官:聊聊你读过的开源代码中用到的设计模式
- Swift Moya的简单使用
- 信用风险建模 in Python 系列 5 - 阈值模型概述