1.相比较于JS中setTimeInterval和setTimeout，angularJS中通过interval来实现定时器的效果，通过timeout来实现时间延迟。
我们分别来看这两个服务
（1）timeout
timeout相当于JS原生里面的延迟执行，不同的是该服务的函数返回的是一个promise对象。
var timer=$timeout(function(){
console.log('hello world')
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};
（2）interval
interval与timeout服务大同小异，创建定时器返回的也是一个promise对象。
var timer=$interval(function(){
console.log('hello world')
timer.then(function(){ console.log('创建成功')},
function(){ console.log('创建不成功')};
2.如何移除定时器
在angularJSo中，特别是在页面切换或者说是路由切换的时候，我们需要移除响应的定时器，我们可以通过on方法，监听路由切换时间。当DOM结构发生变化时，会执行on方法：
$scope.$on('destroy',function(){
$interval.cancel($scope.timer);
AngularJS之定时器无法停止
AngularJS之定时器(interval)
angularjs定时任务的设置与清除
angular设置一个定时器
angular2组件中定时刷新并清除定时器
Angular 定时器$timeout和$interval
Angular2组件定时器-实时监控
没有更多推荐了，查看: 4548|回复: 3
angularJs中自带的$timeout方法和setInterval方法的执行顺序
主题帖子积分
注册会员, 积分 185, 距离下一级还需 15 积分
注册会员, 积分 185, 距离下一级还需 15 积分
&!DOCTYPE html&
&head lang=&en&&
& & &meta charset=&UTF-8&&
& & &title&apply方法&/title&
& & &script src=&angular.min.js&&&/script&
&body ng-app=&myApp&&
& & &div ng-controller=&firstController& ng-click=&show()&&
& && &&&{{name}} {{age}}
& & &/div&
& & &script&
& && &&&var app = angular.module(&myApp&,[]);
& && &&&app.controller('firstController',['$scope','$timeout',function($scope,$timeout){
& && && && &$scope.name=&Amy&;
& && && && &$scope.age=&30&;
& && && && &//二秒后变换一次name
& && && && &setInterval(function(){
& && && && && & $scope.$apply(function () {
& && && && && && &&&$scope.name = &Angela&;
& && && && && & });
& && && && &},2000);
& && && && &//show方法
& && && && &$scope.show = function () {
& && && && && & alert(&ddd&);
& && && && && & $scope.name=&点击之后的name&;
& && && && &}
& && && && &//angularjs本身的$timeout方法,将$timeout方法注入
& && && && &$timeout(function(){
& && && && && & $scope.name = &2秒后的name&
& && && && && & $scope.age=&50&;
& && && && &},2000);
& && && && &/*
& && && && & * $timeout中如果时间为2秒，而上面的setInterval也为2秒时的name和age的变化
& && && && & * 先执行的$timeout方法，后执行的setInterval方法
& && && && & * */
& && &&&}]);
& & &/script&
效果如图：
C:\Users\Administrator\Desktop\aaa.gif
为什么会先执行$timeout方法，后执行setInterval方法呢
主题帖子积分
注册会员, 积分 185, 距离下一级还需 15 积分
注册会员, 积分 185, 距离下一级还需 15 积分
效果如图：
(8.44 KB, 下载次数: 21)
19:55 上传
主题帖子积分
注册会员, 积分 185, 距离下一级还需 15 积分
注册会员, 积分 185, 距离下一级还需 15 积分
如果把其中的setInterval方法换成setTimeOut方法后的结果是$timeout的执行结果
setTimeout(function(){
& && && && && & $scope.$apply(function () {
& && && && && && &&&$scope.name = &Angela&;
& && && && && & });
& && && && &},2000);
主题帖子积分
注册会员, 积分 185, 距离下一级还需 15 积分
注册会员, 积分 185, 距离下一级还需 15 积分
请各位大神解释一下
站长推荐 /1
Ionic3.x入门到实战（打造京东商城项目），从基础入门到项目实战，由浅入深，循序渐进，手把手教学，快速掌握Ionic3.X,学习3-15天即可独立开发项目
Powered byvar app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
//初始化时间
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
//类似js中的setInterval()函数，每1秒重新调用当前时间
angularjs定时任务的设置与清除
AangularJs动态时间例子
AngularJS中的$interval
angular中$interval执行一次
没有更多推荐了，AngularJS: use $timeout, not setTimeout (Example)
Last Updated: August 09, 2018
There are some cases where one needs to perform some sort of timeout operation and we frequently achieve this using JavaScript's setTimeout() function.

However, if we use setTimeout() in an AngularJS application we also need to use $scope.$apply() to ensure that any changes to the scope will be reflected elsewhere (i.e. data-bound in a view).

AngularJS provides a handy wrapper for this: $timeout() - it does the $apply() call for us so we don't have to. Magic!

function Ctrl($scope, $timeout) {

$scope.timeInMs = 0;


var countUp = function() {

$scope.timeInMs+= 500;

$timeout(countUp, 500);

}


$timeout(countUp, 500);
}

And here's a JsFiddle showing it working: 

Update and warning- if you're using $timeout to create what is ess don't - it will break your e2e tests :( The workaround is to set the standard setTimeout for the moment :( :( :(

More info on the Angular github issue here:
Written by
16 Responses
Add your response
$timeout is really handy indeed! I'd also like to see $interval alongside $timeout.
over 1 year ago
Agreed! If I get the chance I might look into that, though I do think someone else must have written one.... maybe :D
over 1 year ago
Yeah, all kinds of hackish workarounds can be spotted out there in the wild:
over 1 year ago
Oh wow, I just posted a similar tip after suffering thru a setTimeout() issue for a while on Friday. Wish I had seen this tip on Thursday :D
over 1 year ago
Yeah there are a couple of $interval implementations kicking around, with various degrees of success.


Hoepfully it'll be standard soon.
over 1 year ago
Great tip!
over 1 year ago
As of 1.2 they will have $interval :)
over 1 year ago
Just out of interest, can you use $digest straight after changing a scope value instead of wrapping it all in an $apply function? Or does that not work?
over 1 year ago
You can use $digest if the $scope data being watched is on the current $scope or child $scopes. A $digest will trigger all the $$watchers down the tree, but won't propagate to sibling or parent $scopes. Use $apply if you want all $$watchers to trigger on the $scope tree.

Also, as noted above, $interval and $timeout trigger $apply, and there are definitely times where you'll want to use a timeout or interval function that isn't changing $scope data. Don't bog down your application by triggering unnecessary $$watches, - know when to use $timeout/$interval and setTimeout/setInterval.
over 1 year ago
Thank you! :)
over 1 year ago
$interval is now available for those that want to use setInterval:
over 1 year ago
"However, if we use setTimeout() in an AngularJS application we also need to use $scope.$apply() to ensure that any changes to the scope will be reflected elsewhere (i.e. data-bound in a view)."

Awesome, thank you buddy! Helped me a lot!
10 months ago
Good project!
8 months ago
Nice Good job. Thanks for sharing greart information. Learn and become Master in AngularJS here:
5 months ago
Thank you for this information. And this article may be some what usefull to get some more knowledge

2 months ago
I 'm ?ánh giá cao post your blog, it or or very help for the job of me. Thank you.

4 days ago
Filed Under
Awesome Job
Cupertino, CA
Copyright 2018轻松一扫，精彩不停
扫描下载APP
正在学习：
感谢你的评价，我们会继续努力！
恭喜，你已学完本节课程！
感谢你的评价，我们会继续努力！
写点什么吧，你的感受对其他同学有很大帮助噢
字数限250字以内
零基础学C语言程序设计
167044人已学
AutoCAD免费课程
118571人已学
把自己妆成明星
101890人已学
购买后可以学习整个课程
&课程信息&
课程价格：0.00元
购买人数：927人
学生满意度：92.86%
直播倒计时：09小时52分15秒
上课时间：
线下课倒计时：09小时52分15秒
扫码下载APP
$timeout与$interval实际使用场景分析与实例讲解
WEB前端工作者
从事IT行业10年以上，服务过中国石油、光大银行、丰田汽车、宝洁公司等企业。擅长php、mysql、linux、javascript、html5、css3、jquery等编程语言和数据库系统。具有多年培训经验，讲课思路清晰，重点突出，实用性强，通俗易懂。并开发HDPHP框架与HDCMS系统
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
第1章AngularJS教程
AngularJS模块、控制器、视图模型、双向数据绑定模型
AngularJS开发宝典之MVVM双向数据绑定图例分析
AngularJS开发宝典之声明模块与控制器规范与依赖注入分析
AngularJS开发宝典之$scope的基本使用方法
ng-model在表单中双向绑定实例分析讲解
ng-model在表单中双向绑定实例分析讲解
ng-value的使用实例讲解
实例讲解angular控制单选框
实例讲解angular操作checkbox复选框
实例讲解angular操作select列表框
函数使用方法大小写转换与对象深拷贝
函数使用对象扩充与数据遍历
json数据转换与本地存储及$scope数据序列化提交到后台
15 数据类型判断函数与数据比较方法的使用
ng-init与ng-trim及表单中表单value与$scope数据提交差异分析
使用ng-if、ng-show、ng-disabled、ng-init超...
ng-repeat实例详细讲解与后盾人网站进行分析
g-selected、ng-disabled、ng-readonly实例讲解
超简单实现表单的全选与反选
ng-model-options设置数据同步时机提交网站性能
通过ng-class动态改变样式类实例操作
使用ng-style动态改变样式
事件处理指令讲解
AngularJS+flex弹性盒模型+bootStrap 开发微信菜单前端..
AngularJS+flex弹性盒模型+bootStrap 开发微信...
AngularJS 弹性盒模型+bootStrap 开发微信菜单前端之根据微信..
弹性盒模型+bootStrap 开发微信菜单前端之根据菜单类型控..
弹性盒模型bootStrap 开发微信菜单前端之...
弹性盒模型+bootStrap 开发微信菜单前端之使用...
弹性盒模型+bootStrap 开发微信菜单前...
弹性盒模型+bootStrap 开发微信菜单前端之使用underscore完成...
修复删除菜单时一级菜单选项不显示的问题
filter变量调节器分析与货币变量调节器处理
lowercase与uppercase过滤器使用
使用limitTo过滤器截取字符
使用date过滤器处理时间
orderBy数据排序与filter筛选过滤器
控制器中如何使用顾虑器服务
callee与过滤器结合制作表格升降排序实例
使用$scope处理升降序
$scope.$watch监听数据变化
使用$watch与$filter过滤器制作数据筛选实例
自定义过滤器之手机加星过滤器实例
SPA应用与自定义指令使用场景应用场景分析
自定义指令directive的restrict属性说明
自定义指令名称的标准规范
自定义指令template函数式操作实例讲解
自定义指令replace属性详解
自定义指令transclude与templateUrl属性详解
controller控制器scope父子集作用域实例讲解一
controller控制器scope父子集作用域实例讲解二
指令scope作用域分析一
scope隔离作用域之@单向文本绑定
scope隔离作用域之=双向文本绑定
scope隔离作用域之=&调用父作用域中函数
指令directive的controller属性
指令directive的link属性详解
tab面板组件的指令实现
服务server应用分析与使用场景
讲 使用$scope.$apply进行数据脏检查
$timeout与$interval实际使用场景分析与实例讲解
$window服务的实例讲解
$sce服务安全的处理html数据
$cacheFactory的缓存实例讲解
讲 $http服务获取后台数据
$http服务请求缓存操作减少服务器压力加快页面展示
$http服务简写操作
$http服务之后台接收POST数据的几种方式
spa项目的server层分析与使用factory创建服务
多个控制器共享服务server数据的处理实例
使用service创建自定义服务
SPA应用的路由使用分析
uiRouter默认路由规则操作
uiRouter链接上实例路由跳转方式
uiRouter路由模板设置方式实例
uiRouter路由控制器使用方式详解
uiRouter路由控制器或指令中执行路由跳转
uiRouter路由参数设置与$stateParams服务的使用
uiRouter路由定义高效的父子级嵌套路由
uiRouter路由定义超灵活的嵌套路由视频
uiRouter路由多个view下的父子级视频图嵌套使用
课程暂无资料
字数限400字符内
BoboTreeXDS
字数限400字符内
萤火之光6613
字数限400字符内
字数限400字符内
字数限400字符内
疾如风66666
字数限400字符内
字数限400字符内
字数限400字符内
字数限400字符内}