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 HTML DOM 解析器 中文手册
简单的PHP HTML DOM 解析器 中文手册 | PHP Simple HTML DOM Parser中文手册 目录 快速入门 如何创建HTML DOM 对象? 如何查找HTML元素? 如何访问H ...
- VMWare 网络连接模式(bridged、NAT、host-only)详解
转自VMWare 网络连接模式(bridged.NAT.host-only)详解 host-only 在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模 ...
- linux驱动分层分离思想
转:https://blog.csdn.net/zqixiao_09/article/details/51088887 前面我们学习I2C.USB.SD驱动时,有没有发现一个共性,就是在驱动开发时,每 ...
- Django-JS实现的ajax
JS实现的ajax ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求 AJAX无须刷新整个页面 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高 小练习 ...
- Block作为返回值时的使用
昨天使用一个小例子简单说明了下Block作为参数时的使用. 今天再来复习一下Block作为返回值使用时的情况,先贴一小段热门第三方框架Masonry的官方sample code: [view1 mas ...
- web页面如何打包封闭成手机APP
所谓的webApp就是html页面跟原生app结合而成的一种应用,这种应用的开发可以节省不少的成本,做出来的app跟原生一样,webApp利用框架技术可以让你有使用app的感觉,具体可以看平安银行的a ...
- PHP练习题一
目录:1.如何使用php导入导出csv?2.php接收POST数据的方式有哪些?3.如何让json_encode()不转义斜杠?我在做服务器返回一些数据时需要返回一些地址,但是默认的json_code ...
- sqlserver一般需求
1.创建一个函数:将用逗号分隔的字符串变成一个表的一列,这样就可以运用在select 语句的in中查询 create Function StrToTable(@str varchar()) Retur ...
- java中HashMap集合的常用方法
public Object clone() 返回hashMap集合的副本 其余的方法都是实现Map集合的 https://www.cnblogs.com/xiaostudy/p/9510763.htm ...
- 《JavaScript高级程序设计》第6章补充 继承
基于原型链继承 将父类的实例赋给子类的prototype来实现继承. 原理:父类的实例有父类所有的实例属性和原型方法,将它赋给子类的prototype后,子类的创建的实例就有会__proto__属性指 ...