React Native implémente la fonction de compte à rebours du code de vérification

Cette fois, je vous propose React Native pour implémenter le code de vérificationfonction de compte à rebours Quelles sont les précautions pour implémenter la fonction de compte à rebours du code de vérification. dans React Native ? , ce qui suit est un cas pratique, jetons un coup d'oeil.

Parce que j'ai utilisé la minuterie directement avant et que je n'ai pas calculé l'heure actuelle. Chaque fois que je quitte le programme, la minuterie ne s'exécute jamais. Cette classe d'outils résout simplement le problème de la sortie du programme. à partir de l'arrière-plan et du timing. Si le bug ne fonctionne pas, téléchargez simplement le code ~~

/**
 * 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);
  }
};

. Utilisez le rappel pour transmettre le compte à rebours converti. Vous pouvez imprimer l'objet temporel renvoyé par callbak

. Voici un exemple simple du compte à rebours du code de vérification :

Choses :

1. Définissez d'abord la machine à états isSentVerify sur true par défaut pour envoyer le code de vérification
2. Après avoir cliqué, réinitialisez la machine à états isSentVerify sur false pour empêcher l'utilisateur de cliquer à nouveau pour envoyer des requêtes réseau
3. Déclarez le temps du compte à rebours (uniquement ici Il ne peut être déclaré que lorsque vous cliquez dessus. Si vous êtes dans composantDidMount, le temps commencera dès que vous entrerez)
4. Définissez le compte à rebours une fois la demande réussie. > 0, définissez l'heure, sinon le texte sera défini sur "Reacquire"
5. Ensuite, déterminez le texte comme "Reacquire", puis définissez la machine d'état isSentVerify sur true, afin que l'utilisateur puisse envoyer. le code de vérification une fois le compte à rebours terminé.
6. Lorsque la requête réseau échoue, définissez isSentVerify sur true au point de capture afin que l'utilisateur puisse à nouveau obtenir le code de vérification

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

Lorsque vous quittez la page, n'oubliez pas de détruire le minuteur

 componentWillUnmount() {
    CountdownUtil.stop()
  }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le PHP chinois. site web!

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!