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

时间: 2024-10-08 10:42:03

ReactNative: 定时器setTimeout、setInterval、setImmediate的使用的相关文章

JS中定时器setTimeout,setInterval,clearTimeout,clearInterval用法

setTimeout是指过多久执行,只执行一次 setInterval是指每过多久执行一次 clearTimeout是关闭setTimeout定时器 clearInterval是关闭setInterval定时器,不让它一直执行 <html> <head> <title></title> </head> <style> </style> <script> window.onload=function(){ var

定时器setTimeout/setInterval中变量报错:not defined 的解决方法

首先声明本人资质尚浅,如有错误,欢迎指正.共同提高. ----------------------------------------------------------------------------------- 首先声明:本文不重点讨论this作用域,而是讨论普通变量在定时器中容易报错的情况: setTimeout的基本用法不再重述, 详见:http://www.w3school.com.cn/htmldom/met_win_settimeout.asp bug: setTimeout

定时器相关 setTimeout setInterval

这个问题也是在参加百度的前端技术学院中遇到的 任务中需要用js实现动画  导师给的评价中setInterval会导致bug 当时不理解   下面把自己学习的过程分享出来 再次理解单线程   老是说js是单线程的,其实自己根本没有好好的理解好这个单线程的意思,就比如我对这个setTimeout(function(){},time)的理解就是在从现在开始到time时间点就会执行的一段代码,其实这样的理解是有问题的,定时器只是计划代码在未来的某个时间执行,但是这个时机是无法保证的 ,这句话能更好的帮助

js中setTimeout/setInterval定时器用法示例

js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 function timedMsg() { setTimeout("alert('7 seconds!')",5000)//5秒后弹出信息 } setTimeout("timedMsg()",2000);//2秒后执行方法 timedMsg setInterval:在指定的时间间隔内

使用定时器settimeout、setInterval执行能传递参数的函数

无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于函数hello(_name),它用于针对用户名显示欢 迎信息: var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); } 这时,如果企图使用以下语句来使hello

setTimeout和setImmediate以及process.nextTick的区别

在javascript中我们了解到了setTimeout和setInterVal函数事件队列(任务队列)的相关知识,除了setTimeout和setInterval这两个方法外,Node.js还提供了另外两个与"任务队列"有关的方法:process.nextTick和setImmediate.它们可以帮助我们加深对"任务队列"的理解. setTimeout() 首先我们看看setTimeout(setInterVal和setTimeout函数区别只是执行次数)函数,

setTimeout ,setInterval

1.setInterval是间隔执行,间隔多久执行一次,执行多次 setInvertal(function(){},500) 2.setTimeout是延迟执行,执行一次 setTimeout(function(){},500) 清除定时器 param=setInterval(function(){},300) clearInterval(param)关闭定时器

js异步处理工作机制(setTimeout, setInterval)

经常谈到异步,但是发现自己一直没深入理解setTimeout, setInterval,逛论坛的时候发现了这篇好文章,分享一下. ————————————————————以下为原文————————————————————————————— 从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的.计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的.我们先来认识一下下面三个函数是如何控制计时器的. var id = setTimeout(fn, de

setTimeout,setInterval回调传参

使用方式一: 标准浏览器与IE10都支持额外传参数,从第三个参数起,作为回调的参数传入.     var id = window.setTimeout(callback,10,1,2,4);     function callback(i,j,k){         alert(i+j+k);         clearTimeout(id);     }  //返回结果:7 ie6-ie9可以用以下代码模拟:(来自司徒正美的框架设计)  if(window.VBArray && !(do