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> AngularJS$ timeout 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>AngularJS$ timeout 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>

解释：这里，创建了一个定时器函数。该函数从0开始，每过0.5秒就递增500。计时器一直运行，直到达到15000毫秒的标记。一个新的信息‘Time Up’会显示在屏幕上。

输出:

AngularJS的$timeout服务