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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
javascript 闭包
Sep 15 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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 读取Postgresql中的数组
2013/04/14 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
发现的以前不知道的函数
2006/09/19 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python3中的json模块使用详解
2018/05/05 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
kali中python版本的切换方法
2019/07/11 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
教师网络培训感言
2014/03/09 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
中秋节活动总结
2014/08/29 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
关于运动会广播稿200字
2014/10/08 职场文书