React Native驗(yàn)證碼倒計時工具類分享

/**
 * Created by zhuang.haipeng on 2017.9.11
 *
 * 廣告倒計時,驗(yàn)證碼倒計時工具類
 *
 * 用法: //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)用工具類的頁面退出的時候, 調(diào)用CountdownUtil.stop() 清除定時器,以免內(nèi)存爆了
 */

export default class CountdownUtil {

 /** 定時器 */
 interval = null;

 /**
 * 創(chuàng)建定時器
 *
 */
 static settimer(countdownDate, callbak) {
 this.interval = setInterval(() => {
 let time = this.getDateData(countdownDate)
 callbak && callbak(time)
 }, 1000)
 }


 /**
 * 侄計時計算 --> 通過此方法計算,可以解決應(yīng)用退出后臺的時候,定時器不走
 * @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;
 }

 /**
 * 數(shù)字補(bǔ)零 --> 例: 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);
 }
};

 if (this.state.isSentVerify === true) {
 // 倒計時時間
 let countdownDate = new Date(new Date().getTime() + 60 * 1000)
 // 點(diǎn)擊之后驗(yàn)證碼不能發(fā)送網(wǎng)絡(luò)請求
 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()
 }