“獲取驗證碼”按鈕的倒計時功能的實現(xiàn)細(xì)節(jié)

iOS 的倒計時有多種實現(xiàn)細(xì)節(jié)杨赤,Cocoa Touch 為我們提供了 NSTimer 類和 GCD 的dispatch_source_set_timer方法去更加方便的使用計時器葡秒。我們也可以很容易的的各種 UI 控件上添加倒計時功能炭菌,你只需要定時刷新一次界面,給控件文本屬性重新賦新值即可惦费,但在實際項目中谦疾,可能并沒有你想的這么簡單美好。

獲取驗證碼.gif

我們不妨設(shè)想一下這樣的情景:

主界面上有一個注冊按鈕算凿,你點擊按鈕 push 到下一級頁面,這個頁面讓你輸入手機(jī)號并有一個獲取驗證碼的按鈕犁功。你填完號碼氓轰,再點擊“獲取驗證碼”按鈕,然后按鈕上的文字開始了 60 秒的倒計時浸卦。20 秒之后你 pop 回上一級頁面署鸡,那么現(xiàn)在的頁面應(yīng)該被銷毀了,10 秒后再次 push 到這個注冊頁面镐躲,那么倒計時按鈕上的文字應(yīng)該是【獲取驗證碼】還是 【30 秒后重試】储玫?

合理交互應(yīng)該是:按鈕正在從 30 秒開始侍筛,繼續(xù)倒計時萤皂,直到秒數(shù)為 0 然后按鈕文字再次變?yōu)椤精@取驗證碼】,并且倒計時過程中匣椰,按鈕不可點擊裆熙。否則倒計時限制將不再有意義。

有 2 個細(xì)節(jié)需要注意:

  • 界面銷毀以后禽笑,計時器還在繼續(xù)計時
  • 重新創(chuàng)建界面后入录,如果該按鈕的計時器存在,則應(yīng)當(dāng)立即繼續(xù)倒計時佳镜。

我們要做的就是獲取該按鈕對應(yīng)對的計時器僚稿。

有人會說,何必如此麻煩蟀伸,直接將這個頁面或者這個按鈕寫成單例不就得了蚀同?是的,單例可以輕松解決這個問題啊掏,但是這種設(shè)計模式切不可濫用蠢络,假如你的 App 有20 個頁面需要獲取驗證碼按鈕,那豈不是得生成 20 個單例的 View controller 迟蜜?要知道刹孔,你并不是經(jīng)常需要這些頁面。如果把按鈕設(shè)計成單例娜睛,那更不可取髓霞,一但你修改了一個按鈕卦睹,其他地方的按鈕必受牽連,引發(fā)不可估計的后果方库。

我的一個方案是分预,生成一個全局的計時器管理類,它負(fù)責(zé)為每一個需要倒計時功能的按鈕分配一個計時器薪捍,按鈕和計時器通過一個 key 相互綁定笼痹。按鈕被 dealloc 之后,計時器任然存在酪穿,直至計時結(jié)束凳干。按鈕重新生成時,計時器管理類會根據(jù) key 決定該按鈕是否需要繼續(xù)倒計時被济。

Do it!

首先需要思考救赐,這個計時器管理類應(yīng)該是是什么樣子?它的具體功能又是什么只磷?我給它命名為WLButtonCountdownManager经磅,它是一個全局類,可用單例設(shè)計(1 個單例類比 20 個單例頁面劃算得多)钮追。它負(fù)責(zé)分配計時器并將其與按鈕綁定预厌,所以它需要有一個容器屬性來存儲計時器,并且還要知道元媚,容器里是否已經(jīng)有計時器在運(yùn)行轧叽。那么WLButtonCountdownManager的頭文件大概類似于這樣:

@class WLCountdownTask;
NS_ASSUME_NONNULL_BEGIN
@interface WLButtonCountdownManager : NSObject

/**
 *  獲取單例
 *
 *  @return 該類的唯一實例
 */
+ (instancetype)defaultManager;

/**
 *  開始倒計時,如果倒計時管理器里具有相同的key刊棕,則直接開始回調(diào)炭晒。
 *
 *  @param aKey         任務(wù)key,用于標(biāo)示唯一性
 *  @param timeInterval 倒計時總時間甥角,受操作系統(tǒng)后臺時間限制网严,倒計時時間規(guī)定不得大于 120 秒.
 *  @param countingDown 倒計時時,會多次回調(diào)嗤无,提供當(dāng)前秒數(shù)
 *  @param finished     倒計時結(jié)束時調(diào)用震束,提供當(dāng)前秒數(shù),值恒為 0
 */
- (void)scheduledCountDownWithKey:(NSString *)aKey
                     timeInterval:(NSTimeInterval)timeInterval
                     countingDown:(nullable void (^)(NSTimeInterval leftTimeInterval))countingDown
                         finished:(nullable void (^)(__unused NSTimeInterval finalTimeInterval))finished;

/**
 *  查詢倒計時任務(wù)是否存在
 *
 *  @param akey 任務(wù)key
 *  @param task 任務(wù)
 *  @return YES - 存在翁巍, NO - 不存在
 */
- (BOOL)countdownTaskExistWithKey:(NSString *)akey task:(WLCountdownTask * _Nullable * _Nullable)task;


@end
NS_ASSUME_NONNULL_END

[*注]這里不得不提一下驴一,對于單例的寫法,各位看官仁者見仁智者見智灶壶。一個嚴(yán)謹(jǐn)?shù)膯卫辽傩枰獫M足以下條件:

  1. 全局唯一性
    ①不可通過 alloc 再次分配資源
    ②線程安全
  2. 不可繼承

About timer

關(guān)于計時器肝断,我使用子線程每秒睡眠一次進(jìn)行模擬,計時操作精度要求并不高,且線程池也利于管理胸懈。

第一步担扑,子類化一個 NSOperation 的類,名為WLCountdownTask:

@interface WLCountdownTask : NSOperation
/**
 *  計時中回調(diào)
 */
@property (copy, nonatomic) void (^countingDownBlcok)(NSTimeInterval timeInterval);
/**
 *  計時結(jié)束后回調(diào)
 */
@property (copy, nonatomic) void (^finishedBlcok)(NSTimeInterval timeInterval);
/**
 *  計時剩余時間
 */
@property (assign, atomic) NSTimeInterval leftTimeInterval;
/**
 *  后臺任務(wù)標(biāo)識趣钱,確保程序進(jìn)入后臺依然能夠計時
 */
@property (assign, nonatomic) UIBackgroundTaskIdentifier taskIdentifier;

/**
 *  `NSOperation`的`name`屬性只在iOS8+中存在涌献,這里定義一個屬性,用來兼容 iOS7
 */
@property (copy, nonatomic) NSString *operationName;

@end


- (void)main {
    
    self.taskIdentifier = [[UIApplication sharedApplication] beginBackgroundTaskWithExpirationHandler:nil];
    
    do {
        dispatch_sync(dispatch_get_main_queue(), ^{
            if (self.countingDownBlcok) self.countingDownBlcok(self.leftTimeInterval);
        });
        
        [NSThread sleepForTimeInterval:1];
    } while (--self.leftTimeInterval > 0);
    
    dispatch_sync(dispatch_get_main_queue(), ^{
        if (self.finishedBlcok) {
            self.finishedBlcok(0);
        }
    });
    
    if (self.taskIdentifier != UIBackgroundTaskInvalid) {
        [[UIApplication sharedApplication] endBackgroundTask:self.taskIdentifier];
        self.taskIdentifier = UIBackgroundTaskInvalid;
    }

}

@end

關(guān)于后臺計時問題首有,也可以采取緩存程序進(jìn)入后臺和恢復(fù)前臺運(yùn)行的時間戳解決燕垃。

下一步,WLButtonCountdownManager 擁有一個線程池(也叫并發(fā)操作隊列井联,規(guī)定隊列中最多只允許存在 20 個并發(fā)線程)卜壕,每分配一個計時器(即創(chuàng)建一個子線程)就將其放入池子中,計時器跑完以后會自動從池子里銷毀烙常。

在創(chuàng)建計時任務(wù)之前轴捎,Manager 從池子里檢索是否有相同 key 的計時任務(wù),如果任務(wù)存在蚕脏,直接回調(diào)計時操作侦副。否則,新建一個標(biāo)識為 key 的任務(wù)驼鞭。

- (void)scheduledCountDownWithKey:(NSString *)aKey
                     timeInterval:(NSTimeInterval)timeInterval
                     countingDown:(void (^)(NSTimeInterval))countingDown
                         finished:(void (^)(NSTimeInterval))finished
{
    if (timeInterval > 120) {
        NSCAssert(NO, @"受操作系統(tǒng)后臺時間限制秦驯,倒計時時間規(guī)定不得大于 120 秒.");
    }
    
    if (_pool.operations.count >= 20)  // 最多 20 個并發(fā)線程
        return;
    
    WLCountdownTask *task = nil;
    if ([self countdownTaskExistWithKey:aKey task:&task]) {
        task.countingDownBlcok = countingDown;
        task.finishedBlcok     = finished;
        if (countingDown && task.leftTimeInterval > 0) {
            countingDown(task.leftTimeInterval);
        }
    } else {
        task                   = [[WLCountdownTask alloc] init];
        task.leftTimeInterval  = timeInterval;
        task.countingDownBlcok = countingDown;
        task.finishedBlcok     = finished;
        
        if ([@([UIDevice currentDevice].systemVersion.doubleValue) compare:@(8)] == NSOrderedAscending) {
            task.operationName = aKey;
        }
        else {
            task.name = aKey;
        }
        
        [_pool addOperation:task];
    }
}


- (BOOL)countdownTaskExistWithKey:(NSString *)akey
                             task:(WLCountdownTask *__autoreleasing  _Nullable *)task
{
    __block BOOL taskExist = NO;
    
    if ([@([UIDevice currentDevice].systemVersion.doubleValue) compare:@(8)] == NSOrderedAscending) {
        [_pool.operations enumerateObjectsUsingBlock:^(__kindof WLCountdownTask * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            if ([obj.operationName isEqualToString:akey]) {
                if (task) *task = obj;
                taskExist = YES;
                *stop     = YES;
            }
        }];
    }
    else {
        [_pool.operations enumerateObjectsUsingBlock:^(__kindof WLCountdownTask * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            if ([obj.name isEqualToString:akey]) {
                if (task) *task = obj;
                taskExist = YES;
                *stop     = YES;
            }
        }];
    }
    
    return taskExist;
}

Last

至此,解決方案到此就結(jié)束了终议。文中難免有些疏漏的地方汇竭,你也可以參見本文 Demo 了解詳細(xì)用法葱蝗。如果你對這個項目有更好的方案穴张,或者建議,非常歡迎 pull request 和我一起來完善它两曼。

2016-10-08更新

有同學(xué)反饋皂甘,假如倒計時要求的時間比較長,如 15 分鐘悼凑,該如何處理偿枕。一般來講,用戶很少會在前臺連續(xù)操作 APP 長達(dá) 15 分鐘(閱讀户辫,社交類 APP 除外)渐夸,所以倒計時的難點會出現(xiàn)在程序進(jìn)入后臺的情況。而這種超過 2 分鐘的倒計時需求比較少見渔欢,倒計時目的是防止頻繁調(diào)用接口以此預(yù)防支付不必要的短信息費用墓塌。所以一種辦法是和你的產(chǎn)品溝通,更改需求,比如 1 自然天內(nèi)同一號碼只允許獲取 3~5 次驗證碼苫幢。如果失敗了访诱,參考后兩種。

第二種方法是韩肝,強(qiáng)制讓程序在后臺一致保持運(yùn)行触菜,但是不建議這么做,長時間的后臺運(yùn)行會消耗額外的系統(tǒng)資源以及電量哀峻。

那么第三種方法就是涡相,進(jìn)入后臺后不再進(jìn)行倒計時,只需分別記錄程序進(jìn)入后臺和再次恢復(fù)至前臺的時間戳剩蟀,計算時間差即可漾峡。這樣即使再長的倒計時需求也可以滿足,但這種方式有個缺陷喻旷,假如用戶手動修改系統(tǒng)時間生逸,那么計算得到的時間會有誤差。

另外且预,有同學(xué)的需求場景是這樣的:

點擊按鈕槽袄,向服務(wù)端發(fā)送 HTTP Request 請求獲取驗證碼,等待服務(wù)端處理完畢獲取響應(yīng)體锋谐,然后根據(jù)結(jié)果判斷是否應(yīng)該啟用倒計時遍尺。

這種情況下,只需要改寫你自己實現(xiàn)的 Button 子類涮拗,將自動倒計時修改為手動調(diào)用倒計時乾戏。處理流程大概是這樣:

流程圖.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市三热,隨后出現(xiàn)的幾起案子鼓择,更是在濱河造成了極大的恐慌,老刑警劉巖就漾,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呐能,死亡現(xiàn)場離奇詭異,居然都是意外死亡抑堡,警方通過查閱死者的電腦和手機(jī)摆出,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來首妖,“玉大人偎漫,你說我怎么就攤上這事∮欣拢” “怎么了象踊?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵舌仍,是天一觀的道長。 經(jīng)常有香客問我通危,道長铸豁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任菊碟,我火速辦了婚禮节芥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘逆害。我一直安慰自己头镊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布魄幕。 她就那樣靜靜地躺著相艇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪纯陨。 梳的紋絲不亂的頭發(fā)上坛芽,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天,我揣著相機(jī)與錄音翼抠,去河邊找鬼咙轩。 笑死,一個胖子當(dāng)著我的面吹牛阴颖,可吹牛的內(nèi)容都是我干的活喊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼量愧,長吁一口氣:“原來是場噩夢啊……” “哼钾菊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起偎肃,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤煞烫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后软棺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體红竭,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年喘落,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片最冰。...
    茶點故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡瘦棋,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出暖哨,到底是詐尸還是另有隱情赌朋,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站沛慢,受9級特大地震影響赡若,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜团甲,卻給世界環(huán)境...
    茶點故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一逾冬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧躺苦,春花似錦身腻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至愈诚,卻和暖如春她按,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背炕柔。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工尤溜, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人汗唱。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓宫莱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親哩罪。 傳聞我的和親對象是個殘疾皇子授霸,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,262評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)际插,斷路器碘耳,智...
    卡卡羅2017閱讀 134,693評論 18 139
  • 1.倒計時按鈕封裝 使用場景:注冊1頁點擊獲取驗證碼按鈕辛辨,push到注冊2頁。界面如下“注冊2-1頁”所示瑟枫,導(dǎo)航欄...
    WeiHing閱讀 955評論 2 4
  • 什么是光照模型光照模型就是一個公式斗搞,使用這個公式來計算在某個點的光照效果 標(biāo)準(zhǔn)光照模型在標(biāo)準(zhǔn)光照模型里面,我們把進(jìn)...
    _涼笙閱讀 1,684評論 2 2
  • 你是雪域高原上明眸皓齒的兒郎 你是布達(dá)拉宮最大的王你口吐蓮花把佛的精義宣講你眼含熱淚為愛人深情歌唱你的情歌在藍(lán)天白...
    流年自在樂閱讀 406評論 0 0