menú
buscar
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
unidades:03_servicios:03_timeout [2014/07/25 14:36] admin |
unidades:03_servicios:03_timeout [2014/08/29 21:26] (actual) admin |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== 3.3 $timeout ====== | ====== 3.3 $timeout ====== | ||
| - | El servicio de [[https://docs.angularjs.org/api/ng/service/$timeout|$timeout]] es como el método [[http://www.w3schools.com/jsref/met_win_settimeout.asp|setTimeout()]] de JavaScript. La principal diferencia a parte de que es un servicio es que al igual que [[unidades:03_servicios:02_http]] se actualiza la vista al actualizar el modelo desde ''$timeout''. | + | El servicio de [[https://docs.angularjs.org/api/ng/service/$timeout|$timeout]] es como el método [[http://www.w3schools.com/jsref/met_win_settimeout.asp|setTimeout()]] de JavaScript. La principal diferencia , a parte de que es un servicio, es que al igual que [[unidades:03_servicios:02_http]] se actualiza la vista al actualizar el modelo desde ''$timeout''. |
| + | La función ''$timeout'' soporta 3 parámetros: | ||
| + | * **fn**: La función a llamar cuando acaba el timeout | ||
| + | * **tiempo**: El tiempo en milisegundos que debe pasar para que se llame a la función. | ||
| + | <note tip> | ||
| + | Hay un tercer parámetro pero que no vamos a ver aqui. | ||
| + | </note> | ||
| + | |||
| + | |||
| + | Al igual que [[http://www.w3schools.com/jsref/met_win_settimeout.asp|setTimeout()]] se llama una única vez. | ||
| + | |||
| + | ====== Ejemplo ====== | ||
| + | Veamos ahora un simple ejemplo de este servicio . | ||
| + | |||
| + | <sxh html;title:index.html;highlight: [10];> | ||
| + | <!DOCTYPE html> | ||
| + | <html ng-app="app"> | ||
| + | |||
| + | <head> | ||
| + | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> | ||
| + | <script src="script.js"></script> | ||
| + | </head> | ||
| + | |||
| + | <body ng-controller="PruebaController"> | ||
| + | ¿Se ha producido el evento? {{producidoEvento}} | ||
| + | </body> | ||
| + | |||
| + | </html> | ||
| + | </sxh> | ||
| + | |||
| + | * Línea 10: Se muestra el valor de la variable ''producidoEvento'' la cual indicará si se ha producido el evento de ''$timeout''. | ||
| + | |||
| + | <sxh js;title:index.js;highlight: [3,6,7,8];> | ||
| + | var app=angular.module("app",[]); | ||
| + | | ||
| + | app.controller("PruebaController",['$scope','$timeout',function($scope,$timeout) { | ||
| + | $scope.producidoEvento="NO"; | ||
| + | | ||
| + | $timeout(function() { | ||
| + | $scope.producidoEvento="SIIIIII"; | ||
| + | },3000); | ||
| + | | ||
| + | }]); | ||
| + | </sxh> | ||
| + | |||
| + | * Línea 3: Se inyecta el servicio de ''$timeout'' | ||
| + | * Línea 6: Se llama a la función de ''$timeout'' y se le pasa nuestra función. | ||
| + | * Línea 7: Se cambia el valor de la variable ''$scope.producidoEvento'' y se actualiza automáticamente la vista. | ||
| + | |||
| + | {{url>http://embed.plnkr.co/FeprPn}} | ||
| + | |||
| + | ====== Referencias ====== | ||
| + | * [[https://docs.angularjs.org/api/ng/service/$timeout|$timeout]] | ||
