失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > angularJs定时器($interval) 延时器($timeout)模拟发送验证码交互

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

时间:2020-12-01 23:26:44

相关推荐

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

定时器顾名思义就是在设定时间间隔周期性执行事件,适用于计时或者周期性事件。

延时器是在设定的时间之后执行设定的事件。

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>

如果觉得《angularJs定时器($interval) 延时器($timeout)模拟发送验证码交互》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。