Ionic Angular 實現驗證碼倒計時功能

前段時間分享了 Android 原生實現驗證碼倒計時，地址是這裏，如今公司使用 Ionic 開發的 App 也要實現相似的功能，如今也記錄下來，供你們參考：

效果圖：

正文

首先介紹下與本文相關的概念 $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 。

• 個人博客：博客傳送門

• 個人簡書：簡書傳送門
• 個人CSDN：CSDN傳送門
• 個人GitHub：GitHub傳送門