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>

结果显示：

用$

<!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>

结果显示：

。

所以从上面三个例子来看，我们可以很直观的看出：JavaScript 的setTimeout 和Angular中的$timeout的區別。Angular中的$timeout比JavaScript 的setTimeout多了一个$apply方法用于传播Model的变化。

后面我会接着学习

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

这两者之间的区别。