angularJs定时器($interval)、延时器($timeout)模拟发送验证码交互

时间:2022-04-04 23:29:17

定时器顾名思义就是在设定时间间隔周期性执行事件,适用于计时或者周期性事件。
延时器是在设定的时间之后执行设定的事件。
angularJs封装了定时器($interval)和延时器($timeout)的服务,只需要在controller注入相应的服务就可以直接使用。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script src="./js/libs/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myController"> <input type="text" ng-model="phone"> <button ng-click="sendCode()" ng-disabled="clickStatus"> <span ng-show="!clickStatus">发送验证码</span> <span ng-show="clickStatus">稍后发送 ( {{times}} )</span> </button> </body> <script> angular.module("myApp",[]).controller("myController",["$scope", "$interval", "$timeout", function ($scope, $interval, $timeout) { $scope.sendCode = function () { $scope.clickStatus = true; $scope.times = 12; // 定义计时器 var timer = $interval(function(){ if ($scope.times > 0) { $scope.times--; } else { //清除计时器 $interval.cancel(timer); } },1000); // 12秒后激活发送按钮 $timeout(function(){ $scope.clickStatus = false; },12000); } }]) </script> </html>