angularjs - settimeout java

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

Question

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?

Answer 1

1. Envuelve automáticamente su devolución de llamada 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 devolución de llamada tradicional. Cuando regrese su devolución de llamada, el valor devuelto se utilizará para resolver la promesa.

Answer 2

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

<div ng-controller="promiseCtrl"> 
 {{result || "Preparing…"}}
</div> 

$ 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 devolución de llamada 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