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 ...
随机推荐
- 使用sqoop把mysql数据导入hive
使用sqoop把mysql数据导入hive export HADOOP_COMMON_HOME=/hadoop export HADOOP_MAPRED_HOME=/hadoop cp /hive ...
- git-bash使用ctrl C无法终止nodemon的执行
原因: git的bug 解决:git版本降级为2.10.0好了
- Gradle 引入本地定制 jar 包，而不使用坐标下载 jar 包的方法
第 1 步:创建文件夹,拷贝 jar 包 在自己的 Gradle 项目里建立一个名为 “libs” (这个名字可以自己定义,不一定非要叫这个名字)的文件夹,把自己本地的 jar 包拷贝到这个文件夹中. ...
- tomcat深入学习—权限篇
如果想给一个应用程序配置权限,可能需要的代码量很多,但你知道吗,仅通过配置tomcat,就能有同样的效果(为一个web应用添加了权限) 效果:打开http://localhost:8080/searc ...
- Javascript -- 示例：多选下拉选框
1. 示例:多选下拉选框 <html> <head> <meta http-equiv="Content-Type" content="te ...
- JavaWeb -- Struts1 多文件上传与下载 DownloadAction， DispatchAction
1. 多文件上传与下载 上传下载jsp: <%@ page language="java" import="java.util.*" pageEncodi ...
- 关于JDK1.8 HashMap扩容部分源码分析
今天回顾hashmap源码的时候发现一个很有意思的地方,那就是jdk1.8在hashmap扩容上面的优化. 首先大家可能都知道,1.8比1.7多出了一个红黑树化的操作,当然在扩容的时候也要对红黑树进行 ...
- JAVA 多线程轮流打印ABC
采用Thread+Semaphore实现,思路很简单 import java.io.IOException; import java.util.concurrent.Semaphore; public ...
- RadioButton实现多选一
RadioButton实现多选一 一.简介 二.RadioButton实现多选一方法 1.将多个RadioButton放在一个RadioGroup里面 <RadioGroup android:i ...
- spring3: AOP 之 通知参数
前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring AOP提供使用org.asp ...