Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的方法

發(fā)布時間：2020-09-23 09:04:07 來源：腳本之家閱讀：142 作者：SmartSean 欄目：web開發(fā)

前言

之前跟大家分享了關(guān)于 Android 原生實現(xiàn)驗證碼倒計時，地址是這里，現(xiàn)在公司使用 Ionic 開發(fā)的 App 也要實現(xiàn)類似的功能，現(xiàn)在也記錄下來，供大家參考：

效果圖：

正文

首先介紹下與本文相關(guān)的概念 $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ù)，可不傳

方法：

1、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 。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

Ionic + Angular.js實現(xiàn)驗證碼倒計時功能的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽