<!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. VS2015配置安卓Android和iOS开发环境

    http://www.cjjjs.cn/paper/gzsh/627201502818357.aspx [摘要] 本文按照步骤一步步的介绍要下载安装的东西,都提供了下载地址.最后将所有需要的程序都打包 ...

  2. django生成json

    好方便啊……list什么的一下都变成json了呢! import json from django.core.serializers.json import DjangoJSONEncoder def ...

  3. Linux开发工具教程

    今天把上个星期写的Linux开发工具相关的教程整理一下,方便阅读: 1.第一课 GCC入门: 2.第二课 GCC入门之静态库以及共享库: 3.第三课 Makefile文件的制作(上) : 4.第四课 ...

  4. $python包管理工具pip的安装和使用

    pip是python的一个非常好用的包管理工具,可以用来很方便地安装和管理各种三方库,本文对其基本用法进行介绍. 安装pip Windows系统上安装 python 2.7.9及以上版本的window ...

  5. springboot与redis的无缝整合(分布式)

    参考博客 : https://blog.csdn.net/csao204282/article/details/54092997 1 首先得引入依赖 <dependency> <gr ...

  6. LVS持久化

    在实际应用场景中,轮询调度并不都是适用的.有些情况下,需要我们把同一个会话的请求都调度给一个RS节点.这时候就需要LVS提供持久化的能力,能够实现会话保持. 一.LVS的持久化主要包括以下两个方面. ...

  7. redis安装优化：

    1)内存分配控制: vm.overcommit_memoryredis启动时肯呢个会出现这样的日志: :M Apr ::! Background save may fail under low mem ...

  8. os包方法

    os包中实现了平台无关的接口,设计向Unix风格,但是错误处理是go风格,当os包使用时,如果失败之后返回错误类型而不是错误数量． os包中函数设计方式和Unix类似,下面来看一下． func Chd ...

  9. shell 中的 eval 及 crontab 命令

    eval eval会对后面的命令进行两遍扫描,如果第一遍扫描后,命令是个普通命令,则执行此命令:如果命令中含有变量的间接引用,则保证间接引用的语义.也就是说,eval命令将会首先扫描命令行进行所有的置 ...

  10. Python引用多个模块，调用模块中的函数时，要注意的地方

    转自:http://blog.csdn.net/yjk13703623757/article/details/70237463 python模块是”从下到上”导入(import)的. 例如: a.py ...