AngularJS的$timeout服务

网络开发是一个快速发展的领域。今天引进的技术，在几个月内必然会过时。早些时候，网站曾经是静态的，几乎没有动画或CSS。然而，虚构的JavaScript的引入彻底改变了网站的外观和功能。但如前所述，用户很快就厌倦了，并开始寻找新鲜的、不受约束的东西。这时AngularJS进入市场，完全改变了网站的功能方式。

单页应用程序（SPA）是使用AngularJS创建的。AngularJS中大约有30个内置服务。除此以外，用户还可以根据项目要求创建自己的用户定义的服务。在这篇文章中，我们将看到AngularJS的‘$timeout’服务。

AngularJS的‘ $timeout’服务在功能上类似于vanilla JavaScript的’window.setTimeout’对象。这个服务允许开发者在执行函数前设置一些时间延迟。$

例如，假设开发者想在用户登录2秒后，在用户的屏幕上显示一条警告信息。他可以使用AngularJS的timeout函数来创建这样的功能。

var app = angular.module('timeoutApp', []);
app.controller('timeoutCtrl', function (scope,timeout) {
scope.text="Enter username and password to login"timeout(function () {
       $scope.text = "Do not share your username and password with anybody";
}, 2000);
});

例子1：在这个例子中，很明显，警告信息是在用户登录后2000毫秒显示的。

<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js" 
            charset="utf-8">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js" 
           charset="utf-8">
    </script>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function(scope,timeout) {
            scope.text = 'Welcome to the website.';
            timeout(function() {
                scope.text = 
    'Message changes after 4000 milliseconds of delay.';
            }, 4000);
        });
    </script>
</head>
  
<body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>AngularJStimeout service</h3>
    <div ng-app="myApp" ng-controller="myCtrl">
          
<p>AngularJS - $timeout</p>
   
          <b>{{text}}</b> 
    </div>
</body>
</html>

解释：这里，$timeout服务被用来创建一个4秒的延迟。这就是为什么欢迎词在页面加载4秒后发生变化。

输出:

AngularJS的$timeout服务

例子2：这个例子演示了一个工作的秒表。秒表从0毫秒开始运行，直到定时器达到15000毫秒。在达到15000毫秒后，屏幕上会显示一个新的信息‘时间到了。

<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"
            charset="utf-8">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js" 
            charset="utf-8">
    </script>
    <script type="text/javascript">
        (function() {
            var myApp = angular.module('myApp', []);
            myApp.controller('myController', function(scope,timeout) {
                //code for the delay
                timeout(function() {
                    scope.txt = "Time Up!";
                }, 15000);
                //storing time in scope variable
                scope.time = 0;
                //callback calculations
                var timer = function() {
                        if(scope.time < 15000) {
                            scope.time += 500;
                            timeout(timer, 500);
                        }
                    }
                    //execute
                timeout(timer, 500);
            });
        })();
    </script>
</head>
  
<body style="text-align:center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>AngularJStimeout service</h3>
    <div ng-app="myApp">
        <div ng-controller="myController">
            <h2>Stopwatch - 15000 milliseconds</h2>
            <div>Time Elapsed : {{time}} milliseconds</div>
            <h3>{{txt}}</h3> </div>
    </div>
</body>
</html>