JavaScript 的setTimeout 和Angular中的$timeout的區別
JavaScript中setTimeout返回值类型和意义说明：
1、setTimeout ：暂停指定的毫秒数后执行指定的代码，返回值是id标识，这个id的意义就是通过clearTimeout来清理暂停执行函数。
setTimeout函数的ID标识(number类型)，每次调用setTimeout函数都会产生一个唯一的ID，可以通过clearTimeout函数(此函数的参数接收一个setTimeout返回的ID)暂停setTimeout函数还未执行的代码
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()//开始计时
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
} function stopCount(){//停止计时
clearTimeout(t)
}
</script>
</head> <body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="button" value="停止计时！" onClick="stopCount()">
<input type="text" id="txt">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body> </html>
AngularJS中$timeout返回值类型和意义说明：
和javascript中原生的setTimeout()以及setInterval()函数不同，AngularJS中的$timeOut()函数会返回一个promise。和其他的promise一样，你可以绑定$timeOut的resolved和rejected时间。然而更重要的是，你可以通过将这个promise传递给$timeOut.cancel()方法来取消掉潜在的定时器。
timeout函数的返回值是一个promise，当到达设置的超时时间时，这个承诺将被解决，并执行timeout函数。
需要取消timeout，需要调用$timeout.cancel(promise);
使用： $timeout(fn,[delay],[invokeApply]);
fn：一个将被延迟执行的函数。
delay：延迟的时间（毫秒）。
invokeApply：如果设置为false，则跳过脏值检测，否则将调用$apply。
$scope.timer = $timeout( function(){
$scope.backup("1");
}, 10000);
方法：
cancel(promise);
取消与承诺相关联的任务。这个的结果是，承诺将被以摒弃方式来解决。
promise：$timeout函数返回的承诺。
$timeout.cancel($scope.timer)
其实两者之间还有一个很重要的区别，首先我们下面来看例子：
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("timeApp",[]);
app.controller("timeController",function($scope,$timeout){
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.message ="Timeout!";
}, 2000);
}); </script>
</head>
<body> <div ng-app="timeApp" ng-controller="timeController">
<label>{{message}}</label>
</div>
</body>
</html>
显示的结果：
2000ms后，页面并没有更新为：Timeout！，数据的更新没有被angular JS觉察到。
例子2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("timeApp",[]);
app.controller("timeController",function($scope,$timeout){
$scope.message ="Waiting 2000ms for update";
setTimeout(function () {
$scope.$apply(function () {
$scope.message ="Timeout!";
});
}, 2000);
}); </script>
</head>
<body> <div ng-app="timeApp" ng-controller="timeController">
<label>{{message}}</label>
</div>
</body>
</html>
结果显示：
用$scope.$apply()包起来。页面上先会显示：Waiting 2000ms for update，等待2秒后内容会被更改为：Timeout! 。显然数据的更新被angular JS觉察到了。
例子3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("timeApp",[]);
app.controller("timeController",function($scope,$timeout){
$scope.message ="Waiting 2000ms for update";
$timeout(function () {
$scope.message ="Timeout!";
}, 2000);
}); </script>
</head>
<body> <div ng-app="timeApp" ng-controller="timeController">
<label>{{message}}</label>
</div>
</body>
</html>
结果显示：
使用angularjs自带的$timeout()函数，页面上先会显示：Waiting 2000ms for update，等待2秒后内容会被更改为：Timeout! 。显然数据的更新被angular JS觉察到了。
所以从上面三个例子来看，我们可以很直观的看出：JavaScript 的setTimeout 和Angular中的$timeout的區別。Angular中的$timeout比JavaScript 的setTimeout多了一个$apply方法用于传播Model的变化。
后面我会接着学习
- Scope提供$watch方法监视Model的变化。
- Scope提供$apply方法传播Model的变化。
这两者之间的区别。
JavaScript 的setTimeout 和Angular中的$timeout的區別的更多相关文章
- 说说Angular中的$timeOut定时器
非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇 ...
- C#中 [], List, Array, ArrayList 區別
[] 是針對特定類型.固定長度的.List 是針對特定類型.任意長度的.Array 是針對任意類型.固定長度的.ArrayList 是針對任意類型.任意長度的.Array 和 ArrayList 是通 ...
- 在C#中模拟Javascript的setTimeout方法
在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...
- Deferred在jQuery和Angular中的使用与简单实现
Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...
- 【响应式编程的思维艺术】 （5）Angular中Rxjs的应用示例
目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...
- Angular中的$q的形象解释及深入用法
作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...
- 前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...
- Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
随机推荐
- java之IDEA中使用Maven
Maven的安装与使用 安装 1.下载,官网下载. 2.解压,存放路径中不可包含空格和中文.如:"E:\dev\workspace\maven\apache-maven-3.6.0" ...
- freeswitch报错
1. 2010-10-26 11:01:58.448513 [ERR] sofia_reg.c:816 Can not do authorization without a compl ...
- 墨刀联合有赞Vant组件库，让你轻松设计出电商原型
继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 有赞Vant组件库 (做电商的宝宝要捂嘴笑了) Vant 组件库是有赞前端团队开源的一套基于Vue的UI组件库,目前版本收 ...
- 师兄带你轻松入门GitHub
小白:师兄,师兄,我最近总是听到Github,看起来好高大上那,可是不懂是做什么得那? 师兄:你知道微博吧,Github就是程序员的微博,你可以在这里看到全世界最优秀的程序员在做什么. 小白:师兄就是 ...
- Python基础(五) python装饰器使用
这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 # -*- coding:gbk -*- '''示例1: 最简单的函数,表示调用了两次 ...
- mysql----------mysql5.7.11导入sql文件时报错This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled
1.导入sql文件出现如下错误. [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in ...
- 解救小哈——dfs深搜
问题描述: 小哈去玩迷宫,结果迷路了,小哼去救小哈.迷宫由n行m列的单元格组成(n和m都小于等于50),每个单元格要么是空地,要么是障碍物. 问题:帮小哼找到一条从迷宫的起点通往小哈所在位置的最短路径 ...
- DIV层的使用方法
1.可以判断你选择的样式是否存在用下边的方法(如果存在的话执行某个方法) if ($(this).hasClass('cur')) 2.这个方法可以查询一个页面中同样的div层总共有几个 var i= ...
- Objective-C不能以new开头命名属性
ARC是在Xcode4.2推出的方便内存管理的一个特性,支持OS10.6及iOS4以后版本.引入ARC之后,相对应的内存管理使用方面做了必要的调整,这里不一一赘述:其中有一项就是文章题目说的,为了与手 ...
- 自制操作系统Antz(1)——Boot Sector
0.引子 最近在看操作系统底层方面的东西,最开始的为什么是07c00h这个问题就让我对操作系统有了很大的兴趣.所以准备在看书之余顺便写一个操作系统(Anz).至于为什么这个系统会被叫做Antz,可以参 ...