$interval是 window.setInterval的Angular包装形式。$interval指每次延迟时间后执行响应的函数（也可以说：每次执行函数的间隔时间）。$interval多数用于计时器

备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。

   $interval  ( fn , delay , [count] , [invokeApply] , [Pass] );

              fn:      一个将被反复执行的函数。
             delay：  每次调用的间隔毫秒数值。
             count：  循环次数的数值，如果没设置，则无限制循环。
             invokeApply： 如果设置为false，则避开脏值检查，否则将调用$apply。
             Pass：  函数的附加参数。

timeout函数的返回值是一个promise，当到达设置的超时时间时，这个承诺将被解决，并执行timeout函数。  $timeout多数用于事件延迟(延迟多长时间后，处理什么事情)
     如果想要取消timeout，需要调用$timeout.cancel(promise);

    $timeout(  fn , [delay] , [invokeApply] );
          fn：一个将被延迟执行的函数。
          delay：延迟的时间（毫秒）。
          invokeApply：如果设置为false，则跳过脏值检测，否则将调用$apply。

    下面来看一个定时器的例子：

            

这面截图的例子可用在手机获取验证码的部分功能，其功能的实现就用到了 $interval 定时器，

interval.html

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<script src="js/angular.min.js" type="text/javascript"></script>

<script src="js/interval1.js"></script>

<style>

    button{

        padding:10px;

        border:none;

        border-radius: 5px;

        background: deepskyblue;

        color: #ffffff;

    }

</style>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <button  class="button gettestcode col-40" ng-click="getTestCode()"

             ng-bind="description" ng-disabled="canClick">

      </button>

</div>

</body>

</html>

interval.js

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope,$interval) {

    $scope.canClick=false;

    $scope.description = "获取验证码";

    var second=59;

    var timerHandler;

    $scope.getTestCode = function(){

        timerHandler =$interval(function(){

            if(second<=0){

                $interval.cancel(timerHandler);    //当执行的时间59s,结束时，取消定时器 ，cancle方法取消

                second=59;

                $scope.description="获取验证码";

                $scope.canClick=false;    //因为 ng-disabled属于布尔值，设置按钮可以点击，可点击发送

            }else{

                $scope.description=second+"s后重发";

                second--;

                $scope.canClick=true;

            }

        },1000)   //每一秒执行一次$interval定时器方法

    };

});

AngularJS $timeout和 $interval ，定时器手机验证码倒计时的更多相关文章

  1. 原生 JS 实现手机验证码倒计时

    可以使用 pointer-events 来阻止元素成为鼠标事件的 target.html5 新增操作元素 class 类名的方式 classList. classList 方法 add(value): ...

  2. js获取手机验证码倒计时的实现

    方案一 <div class="div user-input"> <input type="number" class="code& ...

  3. wepy 小程序定时器（验证码倒计时） 数据绑定页面无刷新

    每次改变数据的时候记得调用  this.$apply() 验证码倒计时 使用的vant-weapp  UI组件 wxml: <van-col span="10" style= ...

  4. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

  5. 微信小程序发送手机验证码---倒计时

    var currentTime = 59 //倒计时的事件(单位:s)var interval = null //倒计时函数 Page({ data: { time:59 //倒计时 }, onLoa ...

  6. jquery实现获取手机验证码倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. vue获取验证码倒计时

    <template> <div> <el-button :disabled="disabled" @click="sendcode" ...

  8. Angular 定时器$timeout和$interval，延时调用

    项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执 ...

  9. ios 手机验证码用户注册(倒计时15秒)

    // // ViewController.m // register手机验证码注册 // // Created by zzqqrr on 17/8/28. // Copyright (c) 2017年 ...

随机推荐

  1. String调用Array相关方法——有点古怪

    这个系列的前面几篇文章中有谈到在一个Object上使用apply.call等方法操作另一个Object的方法,今天我们来学习怎么样在String上调用Array相关方法. 在许多方面,字符串表现的好像 ...

  2. 常用脚本--生成指定表的INSERT 语句

    --================================================= --摘抄自http://www.cnblogs.com/sunth/archive/2013/0 ...

  3. http协议与https协议的区别

    1.前言 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可 ...

  4. mysql遇到的问题：can't creat/write to file "/var/mysql/xxxx.MYI"

    这个问题困扰了我,可能有两个原因. 1.文件夹权限不够,至少也要给出 USERS 组的可读可写权限: 2.文件夹的磁盘满了,文件写不进去了: 如果是这个不能创建和写的问题,很大的概率就是文件的权限.没 ...

  5. C - Oil Deposits(dfs)

    点击打开链接 Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  6. 【OCP-12c】CUUG 071题库考试原题及答案解析（16）

    16.(7-5) choose the best answerThe PRODUCTS table has the following structure:Evaluate the following ...

  7. “全栈2019”Java第一百章：局部内部类可以实现接口吗？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. Spring中 使用注解+c3p0+事物 《模拟银行转账》

    使用注解的方式  模拟转账 要么都成功 要么都失败 !保持一致性! 准备工作: jar包:  需要的类:       UserDao: package com.hxzy.spring.c3p0.Dao ...

  9. 【文文殿下】快速傅里叶变换(FFT)学习笔记

    多项式 定义 形如\(A(x)=\sum_{i=0}^{n-1} a_i x^i\)的式子称为多项式. 我们把\(n\)称为该多项式的次数界. 显然,一个\(n-1\)次多项式的次数界为\(n\). ...

  10. 干货 | 精选《SQL注入、渗透、反病毒》学习总结集锦给你们~

    学到手的都是本事,如果觉得对你有帮助也欢迎分享给身边的基友们吧! 分享干货,手留余香哦~ 本次“开学季拜师活动”的徒弟们在师父的精心指导下,在短短5天内得到了迅速地成长,以前或当时遇到的问题都能够柳暗 ...