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

    后面我会接着学习

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

    这两者之间的区别。

  • 相关阅读:
    数据库原理与应用-------------触发器和视图
    Python操作SQLServer示例
    基于python的图片修复程序-可用于水印去除
    Android APK反编译就这么简单 详解
    android官网文档学习笔记
    android散点技术
    读书笔记一
    eclipse的各种错误和解决方法
    css
    响应式设计
  • 原文地址:https://www.cnblogs.com/qiu-Ann/p/7799186.html
Copyright © 2020-2023  润新知