ng $interval(周期性定时器) $timeout（延迟定时器）
<!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（延迟定时器）的更多相关文章
- BOM-使用定时器
window对象包含4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时运行,避免连续执行,这样可以设计动画 方法 说明 setInterval() 按照指定的周期,(以毫秒为单位)来调用函数 ...
- TCP的定时器系列 — SYNACK定时器
主要内容:SYNACK定时器的实现,TCP_DEFER_ACCPET选项的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 在上一篇博客中,已经连带 ...
- angularjs 中的setTimeout(),setInterval() / $interval 和 $timeout
$interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...
- TCP的定时器系列 — 零窗口探测定时器
主要内容:零窗口探测定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 出现以下情况时,TCP接收方的接收缓冲区将被塞满数据: 发送方的发送速 ...
- TCP的定时器系列 — 超时重传定时器
主要内容:TCP定时器概述,超时重传定时器.ER延迟定时器.PTO定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd Q:一条TCP连接会使用 ...
- _ZNote_Qt_定时器的总结
Qt中实现定时器有两种方法. 一种是使用QObject类定时器;一种是使用QTimer类定时器.(定时器的精度依赖于操作系统和硬件,大多数平台支持20ms) 1,QObject类定时器. 通过QObj ...
- cocos2d-js 定时器
1.scheduleUpdate 节点中有scheduleUpdate接口,通过这个接口,可以让游戏在每帧执行都执行update方法 var ScheduleUpdateLayer = cc.Laye ...
- vue+js清除定时器
注意data数据里面一定要定义Timeout Timeout:Function,//定时器 methods里面 moseovefalse(){//需要执行的方法 var that=this; that ...
- EasyMvc入门教程-基本控件说明（2）定时器
我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...
随机推荐
- PHP iconv函数
最近在做一个程序,需要用到iconv函数把抓取来过的utf-8编码的页面转成gb2312, 发现只有用iconv函数把抓取过来的数据一转码数据就会无缘无故的少一些. iconv函数库能够完成各种字符集 ...
- initrd.img的压缩(制作)及解压的过程
一.启动镜像initrd.img 文件类RedHat 系统从vmlinuz 核心引导后,会读取initrd.img 启动镜像.该文件中包含驱动模块等信息,是非常重要的文件.不同版本使用的格式不同.1. ...
- hadoop 2.0安装及HA配置简述
一.单机模式 a.配置本机到本机的免密登录 b.解压hadoop压缩包,修改hadoop.env.sh中的JAVA_HOME c.修改core-site.xml <configuration&g ...
- Sybase：删除表中的某列
Sybases:删除表中的某列 alter table tb1(表名) drop clo1(列名); commit;
- Linux yum源地址
----------------------------------Linux yum源地址------------------------------ Zabbix 3.0 yum源 rpm -iv ...
- 20145109 《Java程序设计》第七周学习总结
20145109 <Java程序设计>第七周学习总结 Chapter 13 Time & Date Date System.currentTimeMillis() return L ...
- ES6 实现阶乘
// 实现一个5的阶乘function factorial(n, acc = 1) { console.log(`n=${n};acc=${acc}`) if(n <= 1) return ac ...
- Spring_泛型依赖注入
- Spring混合配置
Spring混合配置 一.在JavaConfig中引入其他配置 在JavaConfig中引入JavaConfig配置 使用@Import({OtherConfig1.class,OtherConfig ...
- idea技巧
写在前面 以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊.深深的爱上了它,强大到无所不能: "工欲善其事必先利其器",IntelliJ IDEA作为一个非常 ...