Maison > interface Web > js tutoriel > React Native implémente la fonction de compte à rebours du code de vérification

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

php中世界最好的语言
Libérer: 2018-04-17 10:22:21
original
2576 Les gens l'ont consulté

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);
  }
};
Copier après la connexion

. 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,
        })
      });
    }
Copier après la connexion

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

 componentWillUnmount() {
    CountdownUtil.stop()
  }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal