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 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
javascript与有限状态机详解
May 08 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
JS原型与继承操作示例
May 09 Javascript
vue实现购物车案例
May 30 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
详解JavaScript作用域 闭包
Jul 29 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新手上路(三)
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python 读取位于包中的数据文件
2020/08/07 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
个人先进材料范文
2014/12/30 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫