React Native验证码倒计时工具类分享
程序员文章站
2022-07-06 20:31:48
本文实例为大家分享了react native验证码倒计时工具类的具体代码,供大家参考,具体内容如下
因为以前直接用定时器,没去计算当前的时候,每次退出程序的时候,定时器一...
本文实例为大家分享了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 ? time.sec + 's' : '重新获取' }, () => { if (this.state.timertitle == "重新获取") { this.setstate({ issentverify: true }) } }) }) } ).catch((err) => { this.setstate({ issentverify: true, }) }); }
退出页面的时候,记得销毁定时器
componentwillunmount() { countdownutil.stop() }
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 人间美景图片,数不胜数.
下一篇: 欧洲人体彩绘艺术节太给力了