El desarrollo web es un campo en rápido crecimiento. Una tecnología presentada hoy está destinada a quedar obsoleta en unos pocos meses. Anteriormente, los sitios web solían ser estáticos, con poca o ninguna animación o CSS. Sin embargo, la introducción de Vanilla JavaScript revolucionó por completo la apariencia y el funcionamiento de los sitios web. Pero como se indicó anteriormente, pronto los usuarios se cansaron y comenzaron a buscar algo nuevo y listo para usar. Fue entonces cuando AngularJS ingresó al mercado y cambió por completo la forma en que solían funcionar los sitios web.
Las aplicaciones de una sola página (SPA) se crean utilizando AngularJS. Hay alrededor de 30 servicios integrados en AngularJS. Aparte de estos, los usuarios también pueden crear sus propios servicios definidos por el usuario, según los requisitos del proyecto.
Este artículo tratará sobre el servicio ‘$timeout’ de AngularJS.
Este servicio ‘$timeout’ de AngularJS es funcionalmente similar al objeto ‘window.setTimeout’ de Vanilla JavaScript. Este servicio permite al desarrollador establecer algún tiempo de retraso antes de la ejecución de la función.
Por ejemplo: suponga que el desarrollador quiere mostrar un mensaje de advertencia en la pantalla del usuario, 2 segundos después de que el usuario inicie sesión. Puede usar la función $timeout de AngularJS para crear dicha funcionalidad.
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);
});
En el código de ejemplo anterior, es evidente que el mensaje de advertencia se muestra 2000 milisegundos después de que el usuario inicia sesión.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</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>
<div ng-app="myApp" ng-controller="myCtrl">
<p>AngularJS - $timeout</p>
<b>{{text}}</b>
</div>
</body>
</html>
Explicación: Este ejemplo muestra un cronómetro que funciona. El cronómetro comienza desde 0 milisegundos y funciona hasta que el temporizador llega a 15000 milisegundos. Después de los 15000 milisegundos, se alcanza la marca, se muestra un nuevo mensaje ‘Time Up’ en la pantalla.
Producción
El mensaje de bienvenida predeterminado
Mensaje después de 4 segundos de retraso
Explicación: En el primer ejemplo, se utilizó el servicio $timeout para crear un retraso de 4 segundos. Es por eso que el mensaje de bienvenida cambia 4 segundos después de que se carga la página.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</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>
<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>
Explicación: Este ejemplo muestra un cronómetro que funciona. El cronómetro comienza desde 0 milisegundos y funciona hasta que el temporizador llega a 15000 milisegundos. Después de los 15000 milisegundos, se alcanza la marca, se muestra un nuevo mensaje ‘Time Up’ en la pantalla.
Producción
Captura de pantalla antes de que comience el cronómetro
Captura de pantalla una vez transcurrido el tiempo
Para ello, se crea una función de temporizador. La función comienza desde 0 y aumenta en 500 por cada 0,5 segundos de tiempo transcurrido. El temporizador sigue funcionando hasta que alcanza la marca de 15000 milisegundos. Aparece un nuevo mensaje ‘Time Up’ en la pantalla.
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA