<!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. Codeforces Round #305 (Div. 2)

    C. Mike and Frog 题意:有一只青蛙和一朵花,分别高度为h1.h2,每浇一次水,h1=(x1*h1+y1)mod m,h2=(x2*h2+y2)mod m.求最少浇多少次后h1=a1,h ...

  2. MyIBatis使用

    1.如果根据一些Id进行删除,那么会用到In的用法如: <delete id="DeleteByIds" parameterClass="UserInfo" ...

  3. LeetCode：逆波兰表达式求值【150】

    LeetCode:逆波兰表达式求值[150] 题目描述 根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除 ...

  4. 执行用例，并生成报告——discover，HTMLRunner

    HTMLRunner需要下载Python3的格式,懒人链接:http://pan.baidu.com/s/1tp3Ts 参考:http://bbs.chinaunix.net/thread-41547 ...

  5. 保护你的代码，生成.a文件以及.framework文件需要注意的地方

    一个好的设计,一个方便使用的控件封装,一个酷炫的动画... 是不是迫不及待要分享给大家你的每一个突然蹦出来的好的idea,那就下手吧! 可是,你想要的只是让大家使用它,而不是把所有技术点都公开给每个人 ...

  6. docker内域名无法解析问题

    进入 Docker 容器后,在 hosts 文件中,配置域名解析. # 进入 docker 容器 docker exec -it my_web /bin/bash # 修改 hosts 文件 vi / ...

  7. input-file 部分手机不能拍照问题

    曾经遇到一个需求,用户拍身份证上传验证, 然后我卡在了拍照这个点上. 最初采用的是微信的 api,wx.chooseImage, 但随后发现,返回的是一种只有微信才能预览的 url 格式, 但验证是要 ...

  8. MySQL5.6一键部署

    # 快速部署单节点MySQL脚本# 执行方式:将MySQL包,my3302.cnf配置文件,dbtool脚本文件放到一个目录下.然后按照脚本执行就可以.配置文件提前修改好.文章最后附上my.cnf配置 ...

  9. 关于div可编辑的复制粘贴问题

    todoFilter(e) { e.preventDefault(); if (!e.target.getAttribute('contenteditable')) { return; } const ...

  10. springboot--配置文件加载顺序

    -file:./config(内部配置) -file:./ (内部配置) -classpath:/config (外部配置) -classpath:/ (外部配置) 运维: spring -jar s ...