本文实例为大家分享了React Native验证码倒计时工具类的具体代码,供大家参考,具体内容如下
因为以前直接用定时器,没去计算当前的时候,每次退出程序的时候,定时器一直不走,这个工具类简单的解决程序退出后台,定时器不走的bug,那么,直接上代码咯~~
/** * Created by zhuang.haipeng on 2017.9.11 * * 广告倒计时,验证码倒计时工具类 * * 用法: //60 * 1000 为60秒 , 60 * 60 * 100 为60分钟 ... * let countdownDate = new Date(new Date().getTime() + 60 * 1000) * CountdownUtil.settimer(countdownDate, (time) => { * Console.log(time) --> {years: 0, days: 0, hours: 0, min: 0, sec: 49, millisec: 0} * } * * 切记: 在应用工具类的页面退出的时候, 调用CountdownUtil.stop() 清除定时器,以免内存爆了 */ export default class CountdownUtil { /** 定时器 */ interval = null; /** * 创建定时器 * */ static settimer(countdownDate, callbak) { this.interval = setInterval(() => { let time = this.getDateData(countdownDate) callbak && callbak(time) }, 1000) } /** * 侄计时计算 --> 通过此方法计算,可以解决应用退出后台的时候,定时器不走 * @param countdownDate * @return {*} */ static getDateData(countdownDate) { let diff = (Date.parse(new Date(countdownDate)) - Date.parse(new Date)) / 1000; if (diff <= 0) { this.stop() // 倒计时为0的时候, 将计时器清除 return 0; } const timeLeft = { years: 0, days: 0, hours: 0, min: 0, sec: 0, millisec: 0, }; if (diff >= (365.25 * 86400)) { timeLeft.years = Math.floor(diff / (365.25 * 86400)); diff -= timeLeft.years * 365.25 * 86400; } if (diff >= 86400) { timeLeft.days = Math.floor(diff / 86400); diff -= timeLeft.days * 86400; } if (diff >= 3600) { timeLeft.hours = Math.floor(diff / 3600); diff -= timeLeft.hours * 3600; } if (diff >= 60) { timeLeft.min = Math.floor(diff / 60); diff -= timeLeft.min * 60; } timeLeft.sec = diff; return timeLeft; } /** * 数字补零 --> 例: 00时01分59秒 * @param num * @param length * @return {*} */ static leadingZeros(num, length = null) { let length_ = length; let num_ = num; if (length_ === null) { length_ = 2; } num_ = String(num_); while (num_.length < length_) { num_ = '0' + num_; } return num_; } /** 清除定时器 */ static stop() { clearInterval(this.interval); } };
利用callback将转换的时间倒计时传递出去, 您可以打印一下callbak回去的time对象
这里简单以验证码倒计时为例:
思路:
1. 先设置状态机isSentVerify默认true可以发送验证码
2. 点击之后就重新设置状态机isSentVerify为false, 不让用户再次点击发送网络请求
3. 声明倒计时的时间(这里只能在你点击的时候才能声明,如果再componentDidMount中,会一进入就开始计时的)
4. 请求成功后设置倒计时,判断如果time.sec > 0 的时候,则设置时间,否则将文字设置为为“重新获取”
5. 然后判断文字为“重新获取”, 然后将状态机isSentVerify设为true, 这样用户倒计时结束后,可以再次发送验证码。
6. 网络请求失败的时候,在catch处将isSentVerify设置为true,这样用户可以再次获取验证码
if (this.state.isSentVerify === true) { // 倒计时时间 let countdownDate = new Date(new Date().getTime() + 60 * 1000) // 点击之后验证码不能发送网络请求 this.setState({ isSentVerify: false }); Api.userRegisterCheckCode(this.state.phoneText) .then( (data) => { // 倒计时时间 CountdownUtil.settimer(countdownDate, (time) => { this.setState({ timerTitle: time.sec > 0 "重新获取") { this.setState({ isSentVerify: true }) } }) }) } ).catch((err) => { this.setState({ isSentVerify: true, }) }); }
退出页面的时候,记得销毁定时器
componentWillUnmount() { CountdownUtil.stop() }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]