¿Qué ventaja hay al usar $ timeout en AngularJS en lugar de window.setTimeout?

Tuve una sugerencia para implementar un tiempo de espera como este:

$timeout(function() { // Loadind done here - Show message for 3 more seconds. $timeout(function() { $scope.showMessage = false; }, 3000); }, 2000); }; 

¿Puede alguien decirme cuál es la razón / ventaja al usar esto en lugar de usar setTimeout?

En palabras básicas $timeout refiere a angularjs cuando setTimeout – a JavaScript.

Si aún piensas utilizar setTimeout entonces necesitas invocar $scope.$apply() setTimeout $scope.$apply() después

Como nota al margen

Te sugiero que leas ¿Cómo "creo en AngularJS" si tengo un fondo jQuery? enviar

y AngularJS: use $ timeout, not setTimeout

Ejemplo 1: $ tiempo de espera

  $scope.timeInMs = 0; var countUp = function() { $scope.timeInMs+= 500; $timeout(countUp, 500); } $timeout(countUp, 500); 

Ejemplo 2: setTimeout (misma lógica)

  $scope.timeInMs_old = 0; var countUp_old = function() { $scope.timeInMs_old+= 500; setTimeout(function () { $scope.$apply(countUp_old); }, 500); } setTimeout(function () { $scope.$apply(countUp_old); }, 500); 

Demo Fiddle


$ timeout también devuelve una promesa

JS

 function promiseCtrl($scope, $timeout) { $scope.result = $timeout(function({ return "Ready!"; }, 1000); } 

HTML

 
{{result || "Preparing…"}}

$ timeout también desencadenar ciclo de resumen

Considere que tenemos un código de parte de 3D (no AngularJS) como el complemento de Cloudinary que carga algunos archivos y nos devuelve la callback de porcentaje de ‘progreso’.

  // ..... .on("cloudinaryprogress", function (e, data) { var name = data.files[0].name; var file_ = $scope.file || {}; file_.progress = Math.round((data.loaded * 100.0) / data.total); $timeout(function(){ $scope.file = file_; }, 0); }) 

Queremos actualizar nuestra UI aka $scope.file = file_;

Tan vacio $timeout hace el trabajo para nosotros, activará el ciclo de resumen y $scope.file actualizado por 3d party será re-renderizado en GUI

  1. Envuelve automáticamente su callback en un bloque try / catch y le permite manejar los errores en el servicio $ exceptionHandler: http://docs.angularjs.org/api/ng.$exceptionHandler
  2. Devuelve una promesa y, por lo tanto, tiende a interoperar mejor con otro código basado en promesas que el enfoque de callback tradicional. Cuando regrese su callback, el valor devuelto se utilizará para resolver la promesa.

AngularJS modifica el flujo normal de JavaScript al proporcionar su propio ciclo de procesamiento de eventos. Esto divide el JavaScript en el contexto de ejecución clásico y AngularJS. Solo las operaciones que se aplican en el contexto de ejecución de AngularJS se beneficiarán de la vinculación de datos de AngularJS, el manejo de excepciones, la observación de propiedades, etc.

Al utilizar el servicio de tiempo de espera AngularJS $, el setTimeout ajustado se ejecutará en el contexto de ejecución de AngularJS.

Para más información, ver

  • AngularJS $ timeout Referencia de la API de servicio
  • Guía del desarrollador AngularJS – Integración con el bucle de eventos del navegador