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实现的文字按钮表单特效整理
Dec 07 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
原生js滑动轮播封装
Jul 31 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python提示No module named images的解决方法
2014/09/29 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
详解python开发环境搭建
2016/12/16 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
渗透攻击的测试步骤
2014/06/07 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
单位在职证明书
2014/09/11 职场文书
长城导游词400字
2015/01/30 职场文书
刑事案件上诉状
2015/05/23 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript