PhoneGap中文网

标题: angularJs中自带的$timeout方法和setInterval方法的执行顺序 [打印本页]

作者: amy 时间: 2016-3-2 19:54
标题: angularJs中自带的$timeout方法和setInterval方法的执行顺序
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>apply方法</title>
<script src="angular.min.js"></script>
</head>
<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>
</body>
</html>
效果如图：
C:\Users\Administrator\Desktop\aaa.gif
为什么会先执行$timeout方法，后执行setInterval方法呢

作者: amy 时间: 2016-3-2 19:56
效果如图：

aaa.gif (8.44 KB, 下载次数: 371)

效果如图

作者: amy 时间: 2016-3-2 19:58
如果把其中的setInterval方法换成setTimeOut方法后的结果是$timeout的执行结果
setTimeout(function(){
            $scope.$apply(function () {
                  $scope.name = "Angela";
            });
         },2000);

作者: amy 时间: 2016-3-2 19:58
请各位大神解释一下

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)