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 ...
随机推荐
- Flask 请求源码分析
执行app.run()方法: def run(self, host=None, port=None, debug=None, **options): from werkzeug.serving imp ...
- Node.js学习笔记（3）：NPM简明教程
Node.js学习笔记(3):NPM简明教程 NPM常用操作 更新NPM版本 npm install npm -g -g,表示全局安装.我们可以指定更新版本,只需要在后面填上@版本号即可,也可以输入@ ...
- SQLAlchemy_定义(一对一/一对多/多对多)关系
目录 Basic Relationship Patterns One To Many One To One Many To Many Basic Relationship Patterns 基本关系模 ...
- PAT 天梯赛 L1-012. 计算指数 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-012 AC代码 #include <iostream> #include <cstdio&g ...
- hadoop07---synchronized,lock
synchronized 锁是jvm控制的,控制锁住的代码块只能有一个线程进入.线程执行完了锁自动释放,抛出异常jvm会释放锁. synchronized的缺陷 1.如果一个线程被阻塞了,其余的线程 ...
- ThreadLocal管理登录信息
通常在项目中,用户登录后,我们会将用户的信息存到session,如果想在其它地方获取session中的用户信息,我们需要先获取HttpServletRequest,再通过request.getSess ...
- C#基元类型取值范围对照表
byte 无符号 8 为整数,值为0-255; sbyte 有符号8位整数,-128~127; short 有符号16位整数,范围在-32768~32767 ushort 无符号16位 ...
- MyEclipse激活失败
最近从MyEclipse2014升级MyEclipse2015,结果按照MyEclipse2014的方式激活2015总是失败,显示错误如下图所示: 反复实验,怎么也不能成功激活,最终找到方法 很多情况 ...
- CSS 3 中的多列属性
.column-count <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 蓝屏代码大全 & 蓝屏全攻略
转载自http://diybbs.zol.com.cn/15/86_141447.html 一.蓝屏含义 1.故障检查信息 ***STOP 0x0000001E(0xC0000005,0xFDE38A ...