react封装倒计时定时器

准备工作：

1.在state中定义倒计时时间；

constructor(props){super(props);this.state={time: 60, }
}

2.添加定时器方法；

// 倒计时
time = () => {// 清除可能存在的定时器clearInterval(this.timer)// 创建（重新赋值）定时器this.timer = setInterval(()=>{// 当前时间回显-1this.setState({time:this.state.time-1},()=>{// 判断修改后时间是否小于1达到最小时间if(this.state.time <= 0){// 清除定时器clearInterval(this.timer)// 结束定时器循环return}// 循环自调用this.time()})},1000)
}

3.在组件卸载时清除定时器

componentWillUnmount(){clearInterval(this.timer)
}

使用：

在需要使用的地方直接调用time方法即可;

ps:页面加载完成后调用案例如下

componentDidMount(){this.time()
}

react封装倒计时定时器相关推荐

Flutter开发之倒计时/定时器（30）
倒计时/定时器在移动应用开发中比较常见的功能,比如启动时的广告倒计时.比如弹框倒计时.比如定时1秒后跳转.获取验证码等等.今天就认识一下Flutter中的倒计时/定时器. 一般有两种场景: 我只需要你 ...
react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知源 ...
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
1.定时器介绍在js里面,有两种定时器:倒计时定时器和间隔定时器 (1)倒计时定时器:倒计时多长时间以后执行函数语法:setTimeout(要执行的函数,多长时间以后执行) <script ...
封装Libuv定时器 - Timer
封装Libuv定时器 - Timer Libuv底层定时器采用小顶堆结构管理,即最快超时的定时器句柄会放在最上面. Timer.h #pragma once#include "uv.h& ...
java 定时器倒计时_Java：多种方式实现倒计时定时器
多种方式实现倒计时定时器 github链接:https://github.com/Al-assad/Java-Gadgets/tree/master/count_down 1.简易方式实现 /** * ...
小程序抢购页面倒计时定时器
小程序抢购页面倒计时定时器 from:我是前端美少女
Android倒计时定时器CountDownTimer的用法
前一篇讲了关于Timer定时器的用法,详细请看 Android关于定时器Timer的定义及用法这一篇简单介绍一下关于倒计时定时器的用法,这涉及到一个CountDownTimer类,写了一个简单的案例 ...
vue实现倒计时定时器
前言本文章将发布vue实现倒计时定时器,可用于考试系统自动交卷.商城未付款倒计时取消订单等效果同时,如不清楚vue时间处理,可查看我上一个文章 vue时间处理倒计时定时器为了制作倒计时定时器, ...
react封装翻页插件
插件演示今天用react封装一个翻页插件,先给大家看一下效果: 翻页插件上面的文字是从后台获取的. 插件说明这个插件有五部分组成:首页.上一页.中间显示数字.下一页.尾页.具体的功能是:如果当前页 ...

react封装倒计时定时器

准备工作：

使用：

react封装倒计时定时器相关推荐

最新文章

热门文章