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