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傳送門