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的变化。

后面我会接着学习

  1. Scope提供$watch方法监视Model的变化。
  2. Scope提供$apply方法传播Model的变化。

这两者之间的区别。

JavaScript 的setTimeout 和Angular中的$timeout的區別的更多相关文章

  1. 说说Angular中的$timeOut定时器

     非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇 ...

  2. C#中 [], List, Array, ArrayList 區別

    [] 是針對特定類型.固定長度的.List 是針對特定類型.任意長度的.Array 是針對任意類型.固定長度的.ArrayList 是針對任意類型.任意長度的.Array 和 ArrayList 是通 ...

  3. 在C#中模拟Javascript的setTimeout方法

    在C#中模拟Javascript的setTimeout方法 背景 每种语言都有自己的定时器(Timer),很多人熟悉Javascript中的setInterval和setTimeout,在Javasc ...

  4. Deferred在jQuery和Angular中的使用与简单实现

    Deferred在jQuery和Angular中的使用与简单实现 Deferred是在jQuery1.5版本中加入的,并且jQuery使用它完全重写了AJax,以前也只是偶尔使用.但是上次在使用Ang ...

  5. 【响应式编程的思维艺术】 （5）Angular中Rxjs的应用示例

    目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...

  6. Angular中的$q的形象解释及深入用法

    作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...

  7. 前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件

    在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ...

  8. Angular中ngCookies模块介绍

    1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...

  9. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

随机推荐

  1. 关于容器类型数据的强转一共:str() list() set() tuple() dict() 都可以转换成对应的数据类型 /Number 数据类型的强转一共: int() bool() flaot() complex() 都可以转换成对应的数据类型

    # ###强制转换成字典类型 # 多级容器数据:该类型是容器数据,并且里面的元素还是容器类型数据 # ###二级容器 # 二级列表 listvar = [1,3,4,5,[6,7,8,9]] res ...

  2. [LeetCode] 系统刷题4_Binary Tree & Divide and Conquer

    参考[LeetCode] questions conlusion_InOrder, PreOrder, PostOrder traversal 可以对binary tree进行遍历. 此处说明Divi ...

  3. 深入理解Java虚拟机4-chap6-斗者1星

    一.JVM语言无关性 1.以字节码为基础(Class文件为一组以8位字节为基础单位的二进制流),JVM与Class文件关联,而非与Java语言关联 2.代码编译从本地码(Native Code)转为字 ...

  4. cocos2dx JS layuot纯代码实现背景颜色渐变

    // view._partyBtnClassify.setBackGroundColorType(ccui.Layout.BG_COLOR_GRADIENT);// view._partyBtnCla ...

  5. NOIP2015跳石头

    题目描述 Description 一年一度的“跳石头”比赛又要开始了! 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有N ...

  6. 记录在tiny6410平台上采用4GＳＤ卡来启动uboot和烧写nand flash uboot

    下面这种方法是从网上转的 没有验证 环境:ubuntu 13.04一.首先制作sd启动盘: 插入SD卡    sudo dd iflag=dsync oflag=dsync if=tiny210v2- ...

  7. Oarcle 入门之注释与关键字

    --1.--单行注释 *输入法应定要为英文 --2./*多行注释 *与java相似*/   ------------------------------------------------------ ...

  8. introduce myself

    大家好啊,我是来自计算机一班的喻达龙,是2018届的萌新一个,很高兴与大家相约在这里.我想,大家都是怀抱相同的梦想带着一样的抱负走进涉外.我们从稚嫩蜕化为成熟,我相信我们在这里会从菜鸟变为大佬的,当然 ...

  9. vue 监听变量或对象

    注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...

  10. 怎样从外网访问内网Resin

    外网访问内网Resin 本地安装了Resin,只能在局域网内访问,怎样从外网也能访问本地Resin? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Resin 默认安装的Resin端口 ...