本文實例為大家分享了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() }效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
