React Native驗(yàn)證碼倒計(jì)時(shí)工具類(lèi)分享
本文實(shí)例為大家分享了React Native驗(yàn)證碼倒計(jì)時(shí)工具類(lèi)的具體代碼,供大家參考,具體內(nèi)容如下
因?yàn)橐郧爸苯佑枚〞r(shí)器,沒(méi)去計(jì)算當(dāng)前的時(shí)候,每次退出程序的時(shí)候,定時(shí)器一直不走,這個(gè)工具類(lèi)簡(jiǎn)單的解決程序退出后臺(tái),定時(shí)器不走的bug,那么,直接上代碼:
/**
* Created by zhuang.haipeng on 2017.9.11
*
* 廣告倒計(jì)時(shí),驗(yàn)證碼倒計(jì)時(shí)工具類(lèi)
*
* 用法: //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}
* }
*
* 切記: 在應(yīng)用工具類(lèi)的頁(yè)面退出的時(shí)候, 調(diào)用CountdownUtil.stop() 清除定時(shí)器,以免內(nèi)存爆了
*/
export default class CountdownUtil {
/** 定時(shí)器 */
interval = null;
/**
* 創(chuàng)建定時(shí)器
*
*/
static settimer(countdownDate, callbak) {
this.interval = setInterval(() => {
let time = this.getDateData(countdownDate)
callbak && callbak(time)
}, 1000)
}
/**
* 侄計(jì)時(shí)計(jì)算 --> 通過(guò)此方法計(jì)算,可以解決應(yīng)用退出后臺(tái)的時(shí)候,定時(shí)器不走
* @param countdownDate
* @return {*}
*/
static getDateData(countdownDate) {
let diff = (Date.parse(new Date(countdownDate)) - Date.parse(new Date)) / 1000;
if (diff <= 0) {
this.stop() // 倒計(jì)時(shí)為0的時(shí)候, 將計(jì)時(shí)器清除
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;
}
/**
* 數(shù)字補(bǔ)零 --> 例: 00時(shí)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_;
}
/** 清除定時(shí)器 */
static stop() {
clearInterval(this.interval);
}
};
利用callback將轉(zhuǎn)換的時(shí)間倒計(jì)時(shí)傳遞出去, 您可以打印一下callbak回去的time對(duì)象
這里簡(jiǎn)單以驗(yàn)證碼倒計(jì)時(shí)為例:
思路:
1. 先設(shè)置狀態(tài)機(jī)isSentVerify默認(rèn)true可以發(fā)送驗(yàn)證碼
2. 點(diǎn)擊之后就重新設(shè)置狀態(tài)機(jī)isSentVerify為false, 不讓用戶(hù)再次點(diǎn)擊發(fā)送網(wǎng)絡(luò)請(qǐng)求
3. 聲明倒計(jì)時(shí)的時(shí)間(這里只能在你點(diǎn)擊的時(shí)候才能聲明,如果再componentDidMount中,會(huì)一進(jìn)入就開(kāi)始計(jì)時(shí)的)
4. 請(qǐng)求成功后設(shè)置倒計(jì)時(shí),判斷如果time.sec > 0 的時(shí)候,則設(shè)置時(shí)間,否則將文字設(shè)置為為“重新獲取”
5. 然后判斷文字為“重新獲取”, 然后將狀態(tài)機(jī)isSentVerify設(shè)為true, 這樣用戶(hù)倒計(jì)時(shí)結(jié)束后,可以再次發(fā)送驗(yàn)證碼。
6. 網(wǎng)絡(luò)請(qǐng)求失敗的時(shí)候,在catch處將isSentVerify設(shè)置為true,這樣用戶(hù)可以再次獲取驗(yàn)證碼
if (this.state.isSentVerify === true) {
// 倒計(jì)時(shí)時(shí)間
let countdownDate = new Date(new Date().getTime() + 60 * 1000)
// 點(diǎn)擊之后驗(yàn)證碼不能發(fā)送網(wǎng)絡(luò)請(qǐng)求
this.setState({
isSentVerify: false
});
Api.userRegisterCheckCode(this.state.phoneText)
.then(
(data) => { // 倒計(jì)時(shí)時(shí)間
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,
})
});
}
退出頁(yè)面的時(shí)候,記得銷(xiāo)毀定時(shí)器
componentWillUnmount() {
CountdownUtil.stop()
}
效果圖:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react.js CMS 刪除功能的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇react.js CMS 刪除功能的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Webpack3+React16代碼分割的實(shí)現(xiàn)
這篇文章主要介紹了Webpack3+React16代碼分割的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
詳解React-Router中Url參數(shù)改變頁(yè)面不刷新的解決辦法
這篇文章主要介紹了詳解React-Router中Url參數(shù)改變頁(yè)面不刷新的解決辦法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Webpack 4.x搭建react開(kāi)發(fā)環(huán)境的方法步驟
這篇文章主要介紹了Webpack 4.x搭建react開(kāi)發(fā)環(huán)境的方法步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
React中setState同步異步場(chǎng)景的使用
本文主要介紹了React中setState同步異步場(chǎng)景的使用,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
詳解基于React.js和Node.js的SSR實(shí)現(xiàn)方案
這篇文章主要介紹了詳解基于React.js和Node.js的SSR實(shí)現(xiàn)方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03

