网站首页 » 前端开发 » JavaScript » AngularJS $timeout $interval 定时器用法
上一篇:
下一篇:

AngularJS $timeout $interval 定时器用法

前言

原生的 JavaScript 已经给我们提示了setTimeout 和 setInterval 了,为什么 Angular 还给我们这两个东西($timeout $interval)呢?。因为在AngularJS 中如果你使用原生的setTimeout 和 setInterval 的话,在计时器里更改的值是不是自动更新到页面中的,而$timeout 和 $interval 就可以做到,也就是说 AngularJS 为我们把原生 JavaScript 的 setTimeout 和 setInterval 做了封装。

看这里
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $timeout 和 $interval</title>
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div>{{numberTimeout}}</div>
<div>{{numberInterval}}</div>
</div>
<script>
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope","$timeout","$interval",function($scope,$timeout,$interval){
    $scope.numberTimeout = 0;
    $scope.numberInterval = 0;
    var timerTimeout = null;
    var timerInterval = null;

    timerTimeout = $timeout(function(){
        $scope.numberTimeout ++;
        $timeout.cancel(timerTimeout); // 取消定时器
    },1000); // 1000 毫秒后执行

    timerInterval = $interval(function(){
        $scope.numberInterval ++;
        $interval.cancel(timerInterval); // 取消定时器
    },1000); // 每隔 1000 毫秒执行一次
}]);
</script>
</body>
</html>

而如果你用的是 JavaScript 原生的 setTimeout 和 setInterval 那么你就得这样写:

看这里
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $timeout 和 $interval</title>
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div>{{numberTimeout}}</div>
<div>{{numberInterval}}</div>
</div>
<script>
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope",function($scope){
    $scope.numberTimeout = 0;
    $scope.numberInterval = 0;
    var timerTimeout = null;
    var timerInterval = null;
    timerTimeout = setTimeout(function(){
        $scope.numberTimeout ++;
        $scope.$apply();
        clearTimeout(timerTimeout);
    },1000); // 1000 毫秒后执行

    timerInterval = setInterval(function(){
        $scope.numberInterval ++;
        $scope.$apply();
        clearInterval(timerInterval);
    },1000); // 每隔 1000 毫秒执行一次
}]);
</script>
</body>
</html>

并且你得使用 AngularJS 中的 $scope.$apply() 来做脏检查。所以别人已经帮你封装好了,你为什么还不用呢?真的是不用白不用。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angularjs-timeout-and-interval/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END