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

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

本文執行個體為大家分享了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()  }

：

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。