国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

React Native驗證碼倒計時工具類分享

來源:懂視網(wǎng) 責編:小OO 時間:2020-11-27 22:27:03
文檔

React Native驗證碼倒計時工具類分享

本文實例為大家分享了React Native驗證碼倒計時工具類的具體代碼,供大家參考,具體內容如下:因為以前直接用定時器,沒去計算當前的時候,每次退出程序的時候,定時器一直不走,這個工具類簡單的解決程序退出后臺,定時器不走的bug,那么,直接上代碼咯~~。
推薦度:
導讀本文實例為大家分享了React Native驗證碼倒計時工具類的具體代碼,供大家參考,具體內容如下:因為以前直接用定時器,沒去計算當前的時候,每次退出程序的時候,定時器一直不走,這個工具類簡單的解決程序退出后臺,定時器不走的bug,那么,直接上代碼咯~~。

本文實例為大家分享了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;

 /**
 * 創(chuàng)建定時器
 *
 */
 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;
 }

 /**
 * 數(shù)字補零 --> 例: 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. 先設置狀態(tài)機isSentVerify默認true可以發(fā)送驗證碼
2. 點擊之后就重新設置狀態(tài)機isSentVerify為false, 不讓用戶再次點擊發(fā)送網(wǎng)絡請求
3. 聲明倒計時的時間(這里只能在你點擊的時候才能聲明,如果再componentDidMount中,會一進入就開始計時的)
4. 請求成功后設置倒計時,判斷如果time.sec > 0 的時候,則設置時間,否則將文字設置為為“重新獲取”
5. 然后判斷文字為“重新獲取”, 然后將狀態(tài)機isSentVerify設為true, 這樣用戶倒計時結束后,可以再次發(fā)送驗證碼。
6. 網(wǎng)絡請求失敗的時候,在catch處將isSentVerify設置為true,這樣用戶可以再次獲取驗證碼

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

效果圖:

聲明:本網(wǎng)頁內容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

React Native驗證碼倒計時工具類分享

本文實例為大家分享了React Native驗證碼倒計時工具類的具體代碼,供大家參考,具體內容如下:因為以前直接用定時器,沒去計算當前的時候,每次退出程序的時候,定時器一直不走,這個工具類簡單的解決程序退出后臺,定時器不走的bug,那么,直接上代碼咯~~。
推薦度:
標簽: 分享 rea React
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 中文字幕版免费电影网站 | 欧洲亚洲一区 | 日韩精品一区二区三区在线观看l | 国产中文在线 | 国产日韩在线视频 | 欧美色图亚洲激情 | 国产原创一区二区 | 国产精品久久久久国产精品 | 在线观看亚洲一区二区 | 日韩精品在线一区二区 | 国产成人久久精品二区三区 | 另类国产精品一区二区 | 国产精品成人一区二区三区 | 在线观看亚洲 | 国产亚洲一区二区三区 | 国产亚洲精品va在线 | 欧美日本韩国一区二区 | 中文字幕 日韩有码 | 亚洲精品91| 日韩高清一区二区 | 国产高清在线精品一区二区三区 | 制服丝袜一区二区三区 | 欧美精品一区二区三区在线 | 欧美精品色精品一区二区三区 | 国产一级淫| 欧美第一夜 | 亚洲欧洲精品成人久久曰影片 | 伊人久久中文字幕久久cm | 日本色图在线观看 | 91大神在线精品视频一区 | 国产欧美色图 | 日本六十路丰满老太交尾 | 天天做天天摸天天爽天天爱 | 国产日韩欧美91 | 劲爆欧美精品13页 | 日韩欧美天堂 | 亚洲欧美日韩天堂 | 国产精品香蕉一区二区三区 | 99精品欧美一区二区三区综合在线 | 欧美精品一区二区三区四区 | 亚洲精品第1页 |