React Native implementiert die Countdown-Funktion für den Bestätigungscode

Dieses Mal bringe ich Ihnen React Native mit, um die BestätigungscodeCountdown-Funktion zu implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Bestätigungscode-Countdown-Funktion? In React Native? ist das Folgende ein praktischer Fall, schauen wir uns das an.

Da ich Timer direkt zuvor verwendet habe und nicht jedes Mal die aktuelle Zeit berechnet habe, wird der Timer nie ausgeführt den Hintergrund und das Timing. Wenn der Fehler nicht funktioniert, laden Sie einfach den Code hoch~~

/**
 * 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_ = &#39;0&#39; + num_;
    }
    return num_;
  }
  /** 清除定时器 */
  static stop() {
    clearInterval(this.interval);
  }
};

Verwenden Sie Callback, um den konvertierten Zeit-Countdown zu übergeben. Sie können das von Callbak zurückgegebene Zeitobjekt drucken

Hier ist ein einfaches Beispiel für den Countdown des Bestätigungscodes:

Ideen:

1. Stellen Sie zunächst die Zustandsmaschine isSentVerify standardmäßig auf „true“ ein, um den Bestätigungscode zu senden
2. Setzen Sie nach dem Klicken die Zustandsmaschine isSentVerify auf „false“ zurück, um zu verhindern, dass der Benutzer erneut klickt, um Netzwerkanfragen zu senden
3. Deklarieren die Countdown-Zeit (nur hier) Sie kann nur dann deklariert werden, wenn Sie darauf klicken. Wenn Sie sich in „componentDidMount“ befinden, beginnt die Zeit, sobald Sie sie eingeben.
Stellen Sie den Countdown ein, nachdem die Anfrage erfolgreich war > 0, stellen Sie die Zeit ein, andernfalls wird der Text auf „Reacquire“ gesetzt
5. Bestimmen Sie dann den Text als „Reacquire“ und setzen Sie dann die Statusmaschine isSentVerify auf true, damit der Benutzer senden kann Geben Sie den Bestätigungscode erneut ein, nachdem der Countdown abgelaufen ist.
6. Wenn die Netzwerkanforderung fehlschlägt, setzen Sie isSentVerify am Fangpunkt auf „true“, damit der Benutzer den Bestätigungscode erneut erhalten kann

 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,
        })
      });
    }

Denken Sie beim Verlassen der Seite daran, den Timer zu zerstören

 componentWillUnmount() {
    CountdownUtil.stop()
  }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP-Chinesisch Webseite!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonReact Native implementiert die Countdown-Funktion für den Bestätigungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!