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 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 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读取mysql的简单实例
2014/01/15 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
js 编写规范
2010/03/03 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python实用代码片段收集贴
2015/06/03 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
个人授权委托书
2014/09/15 职场文书
2014年幼师工作总结
2014/11/22 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
董事长秘书工作总结
2015/08/14 职场文书
三年级作文之小小梦想
2019/12/06 职场文书