AngularJS中的$ timeout服务

Web开发是一个快速发展的领域。今天引入的一项技术必将在几个月内过时。以前，网站以前是静态的，几乎没有动画或CSS。但是，香草JavaScript的引入彻底改变了网站过去的外观和函数。但是如前所述，很快，用户就厌倦了，开始寻找新鲜的东西，开箱即用。那时AngularJS进入市场并彻底改变了网站的函数。

单页应用程序(SPA)是使用AngularJS创建的。 AngularJS中大约有30种内置服务。除此之外，用户还可以根据项目要求创建自己的用户定义服务。

本文将讨论AngularJS的‘$ timeout’服务。
AngularJS的“ $ timeout”服务在功能上类似于原始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);
  
});

在上面给出的示例代码中，很明显，警告消息在用户登录后的2000毫秒后显示。
范例1：

  

  

    GeeksforGeeks
    
  
  
    
        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);
  
        });
    
  

  

  
    
  
        AngularJS - $timeout
  
        {{text}}
  
    
  

  

说明：此示例演示了一个有效的秒表。秒表从0毫秒开始计时，直到计时器达到15000毫秒为止。 15000毫秒后，到达标记，屏幕上显示一条新消息“ Time Up” 。

输出

默认欢迎消息

延迟4秒后出现讯息

说明：在第一个示例中， $ timeout服务已用于创建4秒的延迟。这就是为什么欢迎消息在页面加载后4秒钟更改的原因。

范例2：

  

  

    GeeksforGeeks
  
    
  
  
    
        (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);
  
            });
  
        })();
    
  

  

  
    
        
            Stopwatch - 15000 milliseconds
            Time Elapsed : {{time}} milliseconds
            {{txt}}
        
    
  

  

说明：此示例演示了一个有效的秒表。秒表从0毫秒开始计时，直到计时器达到15000毫秒为止。 15000毫秒后，到达标记，屏幕上显示一条新消息“ Time Up” 。

输出

秒表开始前的屏幕截图

时间过后的屏幕截图

为此，创建了计时器函数。该函数从0开始，每经过0.5秒便增加500。计时器一直运行直到达到15000毫秒标记。屏幕上将显示一条新消息“ Time Up” 。