<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

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

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <span>{{count}}</span>

</div>

<script>

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

  app.controller('myCtrl',

    function ($scope, $interval) {

      $scope.count = 0;

      //启动周期性定时器 实现对数据的自增操作

      /* setInterval(

       function () {

       $scope.count++;

       console.log($scope.count);

       //$scope.$digest();

       $scope.$apply();

       },

       500

       )*/

      $interval(

        function () {

          $scope.count++;

        },

        500)

    })

</script>

</body>

</html>

通过$interval，每隔1s，实现图片轮播，两个按钮：开始、结束
分析：
构造数组，数组中存储是图片的名称信息
通过定时器不断的切换数组的下标。

结果：

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

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

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <img ng-src="img/{{list[index]}}" alt=""/>

  <button ng-click="start()">开始</button>

  <button ng-click="stop()">结束</button>

</div>

<script>

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

  app.controller(

    'myCtrl',

    function ($scope,$interval) {

      $scope.index = 0;

      $scope.list = ['1.jpg','2.jpg','3.jpg','4.jpg'];

      $scope.start  = function () {

      //启动定时器

       promise = $interval(

          function () {

            $scope.index++;

            if($scope.index > 3 )

            {

              $scope.index = 0;

            }

          },

          500

        )

      }

      $scope.stop = function () {

      //结束定时器

        $interval.cancel(promise);

      }

    })

</script>

</body>

</html>

ng $interval(周期性定时器) $timeout（延迟定时器）的更多相关文章

  1. BOM-使用定时器

    window对象包含4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时运行,避免连续执行,这样可以设计动画 方法 说明 setInterval() 按照指定的周期,(以毫秒为单位)来调用函数 ...

  2. TCP的定时器系列 — SYNACK定时器

    主要内容:SYNACK定时器的实现,TCP_DEFER_ACCPET选项的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 在上一篇博客中,已经连带 ...

  3. angularjs 中的setTimeout(),setInterval() / $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  4. TCP的定时器系列 — 零窗口探测定时器

    主要内容:零窗口探测定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 出现以下情况时,TCP接收方的接收缓冲区将被塞满数据: 发送方的发送速 ...

  5. TCP的定时器系列 — 超时重传定时器

    主要内容:TCP定时器概述,超时重传定时器.ER延迟定时器.PTO定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd Q:一条TCP连接会使用 ...

  6. _ZNote_Qt_定时器的总结

    Qt中实现定时器有两种方法. 一种是使用QObject类定时器;一种是使用QTimer类定时器.(定时器的精度依赖于操作系统和硬件,大多数平台支持20ms) 1,QObject类定时器. 通过QObj ...

  7. cocos2d-js 定时器

    1.scheduleUpdate 节点中有scheduleUpdate接口,通过这个接口,可以让游戏在每帧执行都执行update方法 var ScheduleUpdateLayer = cc.Laye ...

  8. vue+js清除定时器

    注意data数据里面一定要定义Timeout Timeout:Function,//定时器 methods里面 moseovefalse(){//需要执行的方法 var that=this; that ...

  9. EasyMvc入门教程-基本控件说明（2）定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

随机推荐

  1. mysql二进制包安装和遇到的问题

    一.编译安装 tar -zxf mysql-5.5.32-linux2.6-x86_64.tar.gz mv mysql-5.5.32-linux2.6-x86_64 /application/mys ...

  2. DELPHI在标题栏上增加按钮

    Delphi代码 unit Unit1; interface uses SysUtils, WinTypes, WinProcs, Messages, Classes, Graphics, Contr ...

  3. 搭建Mac OS X下cocos2d-x的Android开发环境

    版本 Cocos2d-x: cocos2d-2.1beta3-x-2.1.1 OS X: 10.8 Android ADT Bundle: v21.1.0 Android NDK: android-n ...

  4. PAT 天梯赛 L1-002 【递归】

    题目链接 https://www.patest.cn/contests/gplt/L1-002 题意 给出一个数字 和一个字符 画出 可用数字下的最大沙漏,并且输出剩余没用掉的符号数 思路 可以先打一 ...

  5. 对 java 设计模式的一些了解 （正在学习整理中）

    A .设计模式的作用 从书上摘话给你们看看 帮助我们将应用组织成容易了解,容易维护,具有弹性的架构,建立可维护的OO系统,要诀在于随时想到系统以后可能需要的变化以及应付变化的原则. 这么复杂的解释肯定 ...

  6. js防抖

    那我们设置个 options 作为第三个参数,然后根据传的值判断到底哪种效果,我们约定: leading:false 表示禁用第一次执行trailing: false 表示禁用停止触发的回调 我们来改 ...

  7. Entity FrameWork 配置 之连接字符串隐藏或重用

    C/S项目中使用EF,默认回生成app.config文件夹,软件打包安装成功之后就回生成一个对应exe.config.里面会包含配置的一些信息. 这里介绍给大家一种隐藏连接字符串的方式. 代码如下: ...

  8. AFNetworking 3.0 解决加密后请求参数是字符串问题

    把整个请求参数的json加密生成一个字符串传给服务器,错误提示:[NSJSONSerialization dataWithJSONObject:options:error:]: Invalid top ...

  9. HCNP学习笔记之TCP中FLAGS字段SYN, FIN, ACK, PSH, RST, URG

    在TCP层,有个FLAGS字段,这个字段有以下几个标识:SYN, FIN, ACK, PSH, RST, URG. 其中,对于我们日常的分析有用的就是前面的五个字段. 含义: SYN 表示建立连接, ...

  10. Python3：读取配置dbconfig.ini（含有中文）显示乱码的解决方法

    Python3:读取配置dbconfig.ini(含有中文)显示乱码的解决方法 一.原因 Python 3 中虽有encoding 参数,但是对于有BOM(如Windows下用记事本指定为utf-8) ...