React Native验证码倒计时工具类分享

本文实例为大家分享了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()
  }

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。