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


Posted in Javascript onOctober 24, 2017

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

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
js实现自定义滚动条的示例
Oct 27 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 #Javascript
React Native实现地址挑选器功能
Oct 24 #Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 #Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 #Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 #Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 #Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
javascript调试说明
2010/06/07 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
高中生期末评语大全
2014/01/28 职场文书
元旦晚会感言
2014/03/12 职场文书
珠宝店促销方案
2014/03/21 职场文书
中国梦团日活动总结
2014/07/07 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
晚会开幕词
2015/01/28 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
网络管理员岗位职责
2015/02/12 职场文书
刑事起诉书范文
2015/05/19 职场文书
安全守法证明
2015/06/23 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL