前段時間分享了 Android 原生實現(xiàn)驗證碼倒計時芋酌，地址是這里首尼，現(xiàn)在公司使用 Ionic 開發(fā)的 App 也要實現(xiàn)類似的功能耙替，現(xiàn)在也記錄下來时鸵，供大家參考：
效果圖：
gif.gif
正文
首先介紹下與本文相關的概念 $interval
$interval 是 window.setInterval 的 Angular 包裝形式胶逢，函數(shù)如果在沒有被取消的時候會無限執(zhí)行。（取消使用 cancel(promise) ）
用法：
$interval(fn,delay,[count],[invokeApply],[Pass]);
參數(shù)說明：
- fn : 無限執(zhí)行的函數(shù) 必須參數(shù)，必傳
- delay : 每次調(diào)用的間隔毫秒數(shù)值 必須參數(shù)初坠，必傳
- count : 循環(huán)次數(shù)的數(shù)值和簸，如果沒設置，則無限制循環(huán) 非必須參數(shù)某筐，可不傳
- invokeApply : 如果設置為false比搭，則避開臟值檢查，否則將調(diào)用$apply 非必須參數(shù)南誊，可不傳
- Pass : 函數(shù)的附加參數(shù) 非必須參數(shù)，可不傳
方法：
- cancel(promise)
- promise：$interval函數(shù)的返回值蜜托。
具體實現(xiàn)
$scope.description = "獲取驗證碼";
var timerHandler = null;
/**
* 倒計時
* @param time 控制循環(huán)次數(shù)
*/
var countDown = function (second,time) {
timerHandler = $interval(function () {
if (second <= 0) {
$interval.cancel(timerHandler);
second = 59;
$scope.description = "獲取驗證碼";
} else {
$scope.description = second + "s 后可重發(fā)";
second--;
}
}, 1000, time)
}
調(diào)用
countDown(59,60);
最后別忘了注入 $interval 抄囚。
- 我的博客：博客傳送門
