AngularJs中$timeout与$interval实际使用场景分析

最新推荐文章于 2020-06-04 09:57:57 发布

K'illCode

最新推荐文章于 2020-06-04 09:57:57 发布

阅读量512

点赞数

分类专栏： angularJS 文章标签： angularJs

本文链接：https://blog.csdn.net/Dome_/article/details/79277540

版权

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文通过实例演示了AngularJS中$timeout与$interval服务的使用方法，并对比了原生JavaScript的setTimeout和setInterval。展示了如何利用AngularJS服务更新视图并取消定时任务。

摘要由CSDN通过智能技术生成

AngularJs中$timeout与$interval实际使用场景分析，类似于原生js中的setTimeout和setInterval，测试代码如下：

 
       01<!DOCTYPE html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8">
 
       05    <title>$timeout与$interval实际使用场景分析</title>
 
       06    <style type="text/css">
 
       07        .ng-cloak{display:none;}
 
       08    </style>
 
       09</head>
 
       10<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-cloak">
 
       11    {{num}}
 
       12</body>
 
       13</html>
 
       14<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
 
       15<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
 
       16<script type="text/javascript">
 
       17    var m = angular.module('app', []);
 
       18    m.controller('ctr', ['$scope', '$timeout', '$interval', function($scope, $timeout, $interval){
 
       19        $scope.num = 1;
 
       20        /*var time = setTimeout(function(){
 
       21            $scope.num += 1;
 
       22            $scope.$apply();
 
       23        },2000);*/
 
       24 
 
       25        /*var time = $timeout(function(){
 
       26            $scope.num += 1;
 
       27        },1000);
 
       28        $timeout.cancel(time);*/
 
       29 
 
       30        var time = $interval(function(){
 
       31            $scope.num += 1;
 
       32            if($scope.num>=3){
 
       33                $interval.cancel(time);
 
       34            }
 
       35        },1000);
 
       36 
 
       37 
 
       38 
 
       39    }])
 
       40</script>