iOS “获取验证码”按钮的倒计时功能
iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器。我们也可以很容易的的各种 UI 控件上添加倒计时功能,你只需
|
iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer 方法去更加方便的使用计时器。我们也可以很容易的的各种 UI 控件上添加倒计时功能,你只需要定时刷新一次界面,给控件文本属性重新赋新值即可,但在实际项目中,可能并没有你想的这么简单美好。 我们不妨设想一下这样的情景: 主界面上有一个注册按钮,你点击按钮 push 到下一级页面,这个页面让你输入手机号并有一个获取验证码的按钮。你填完号码,再点击“获取验证码”按钮,然后按钮上的文字开始了 60 秒的倒计时。20 秒之后你 pop 回上一级页面,那么现在的页面应该被销毁了,10 秒后再次 push 到这个注册页面,那么倒计时按钮上的文字应该是【获取验证码】还是 【30 秒后重试】? 合理交互应该是:按钮正在从 30 秒开始,继续倒计时,直到秒数为 0 然后按钮文字再次变为【获取验证码】,并且倒计时过程中,按钮不可点击。否则倒计时限制将不再有意义。 有 2 个细节需要注意:
我们要做的就是 获取该按钮对应对的计时器 。 有人会说,何必如此麻烦,直接将这个页面或者这个按钮写成单例不就得了?是的,单例可以轻松解决这个问题,但是这种设计模式切不可滥用,假如你的 App 有20 个页面需要获取验证码按钮,那岂不是得生成 20 个单例的 View controller ?要知道,你并不是经常需要这些页面。如果把按钮设计成单例,那更不可取,一但你修改了一个按钮,其他地方的按钮必受牵连,引发不可估计的后果。 我的一个方案是, 生成一个全局的计时器管理类,它负责为每一个需要倒计时功能的按钮分配一个计时器,按钮和计时器通过一个 key 相互绑定。按钮被 dealloc 之后,计时器任然存在,直至计时结束。按钮重新生成时,计时器管理类会根据 key 决定该按钮是否需要继续倒计时 。 Do it!首先需要思考,这个计时器管理类应该是是什么样子?它的具体功能又是什么?我给它命名为 WLButtonCountdownManager ,它是一个全局类,可用单例设计(1 个单例类比 20 个单例页面划算得多)。它负责分配计时器并将其与按钮绑定,所以它需要有一个容器属性来存储计时器,并且还要知道,容器里是否已经有计时器在跑了。那么 WLButtonCountdownManager 的头文件大概类似于这样: NS_ASSUME_NONNULL_BEGIN [*注]这里不得不提一下,对于单例的写法,各位看官仁者见仁智者见智。一个严谨的单例至少需要满足以下条件:
很多人忽略了第一条的第一点和第二条。 About timer关于计时器,我使用子线程每秒睡眠一次进行模拟,计时操作精度要求并不高,且线程池也利于管理。 第一步,子类化一个 NSOperation 的类,名为 WLCountdownTask : @interface WLCountdownTask : NSOperation 下一步,WLButtonCountdownManager 拥有一个线程池(也叫并发操作队列,规定队列中最多只允许存在 20 个并发线程),每分配一个计时器(即创建一个子线程)就将其放入池子中,计时器跑完以后会自动从池子里销毁。 在创建计时任务之前,Manager 从池子里检索是否有相同 key 的计时任务,如果任务存在,直接回调计时操作。否则,新建一个标识为 key 的任务。 - (void)scheduledCountDownWithKey:(NSString *)aKey Last至此,解决方案到此就结束了 |
iOS “获取验证码”按钮的倒计时功能的更多相关文章
- Angular.js 使用获取验证码按钮实现-倒计时
获取验证码界面效果如图: 需要实现以下逻辑 按钮不可选 --输入电话号码,按钮可选 --点击获取,进入倒计时,按钮不可选 --倒计时结束,回到初识状态 核心代码: var cd = 60; var t ...
- [RN] React Native 获取验证码 按钮
React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...
- js实现发送短信验证码后的倒计时功能(无视页面刷新)
[1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value=& ...
- button获取验证码60秒倒计时 直接用
__block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...
- 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 获取验证码按钮改变案例
HTML代码 <div class="box"> <label for="">手机号</label> <input t ...
- iOS点击获取短信验证码按钮
概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细 代码下载:http://www.demodashi.com ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能
目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...
随机推荐
- javascript中sleep等待实现
function sleep(milliSeconds) { var startTime = new Date().getTime(); while (new Date().getTime() < ...
- 转载 C#结构体(struct)和类(class)的区别
转载原地址: http://dotnet.9sssd.com/csbase/art/8 C#结构体和类的区别问题:在C#编程语言中,类属于引用类型的数据类型,结构体属于值类型的数据类型,这两种数据类型 ...
- mongodb基础系列——数据库查询数据返回前台JSP(二)
上篇博客论述了,数据库查询数据返回前台JSP.博客中主要使用Ajax调用来显示JSON串,来获取其中某一个字段,赋给界面中的某一个控件. 那这篇博客中,我们讲解,把后台List传递JSP展示. Lis ...
- hive 子查询特别分析
Hive只支持在FROM子句中使用子查询,子查询必须有名字,并且列必须唯一:SELECT ... FROM(subquery) name ... 确认下是否一定要求列必须唯一? 建表语句 ...
- AxWindowsMediaPlayer创建、添加播放列表(C#)
// 创见打开对话框对象实例 OpenFileDialog openFileDialog = new OpenFileDialog(); //设置为可以打开多个文件 ...
- Linux 下监控用户最大进程数参数(nproc)是否到达上限
Linux 下监控用户最大进程数参数(nproc)是否到达上限的步骤: 1.查看各系统用户的进程(LWP)数: 注意:默认情况下采用 ps 命令并不能显示出所有的进程.因为 Linux 环境下执行多线 ...
- 命令行创建maven模块工程
上一边文章,借助外部eclipse来创建模块项目,本文直接使用maven命令来创建 mvn archetype:generate -DgroupId=com.mycompany.demo -Darti ...
- CTF
今天发现了一个神奇的领域CTF……感觉打开了新世界的大门 http://ctf.idf.cn/里面各种有趣的题目0.0
- PostgreSQL的 initdb 源代码分析之二
继续分析 下面这一段,当 initdb --version 或者 initdb --help 才有意义. ) { ], || strcmp(argv[], ) { usage(progname); ...
- 有关java中static关键的重写问题
<Java编程思想>中这样提到“只有普通的方法调用可以是多态的”.说白了,就是静态方法不能实现重写这种多态. JAVA静态方法形式上可以重写(只要子类不加@Override关键字修饰的话, ...