Welchen Vorteil gibt es bei der Verwendung der $timeout in AngularJS, anstatt Fenster.setTimeout?

Hatte ich einen Vorschlag zur Implementierung eines timeout-so:

  $timeout(function() {

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

  }, 2000);
};

Kann mir jemand sagen, was ist der Grund /Vorteil bei der Verwendung dieser eher als die Verwendung von setTimeout?

InformationsquelleAutor Samantha J T Star | 2013-10-26
  1. 64

    In grundlegende Worte $timeout bezieht sich auf angularjs, wenn setTimeout - JavaScript.

    Wenn Sie denken immer noch zu verwenden setTimeout daher müssen Sie aufrufen $scope.$apply() nach

    Als eine Randnotiz

    Ich schlage vor, Sie Lesen Wie kann ich das "denken in AngularJS" wenn ich ein jQuery-hintergrund? post

    und AngularJS: verwenden Sie $timeout, setTimeout nicht

    Beispiel 1: $timeout

       $scope.timeInMs = 0;

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

    Beispiel 2: setTimeout (gleiche Logik)

     $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 gibt auch ein Versprechen

    JS

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

    HTML

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

    $timeout ausgelöst digest-Zyklus

    Betrachten wir einige 3d-party-code (nicht AngularJS) wie Cloudinary plugin, dass der Upload-Datei und gibt uns 'Fortschritt' Prozentsatz Rückruf. 

         //.....
     .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);         
            })

    Wollen wir aktualisieren unsere UI aka $scope.file = file_;

    So leer $timeout für uns die Arbeit macht, löst Sie die digest-Zyklus und $scope.file aktualisiert durch 3d-party wird neu gerendert, in der GUI

    • setTimeout() definitiv nicht Lesen jQuery (es ist das standard-JavaScript).
    • yep, sorry, ich habe vergessen beim letzten mal verwendet setTimeout. Danke für fix
    • $timeout gibt auch ein Versprechen: das Beispiel scheint wirklich nützlich!
    InformationsquelleAutor Maxim Shoustin
  2. 20
    1. Es umschließt Ihren Rückruf für Sie automatisch in einen try/catch-block und lasst Euch behandeln von Fehlern in der $exceptionHandler service: http://docs.angularjs.org/api/ng.$exceptionHandler
    2. Es gibt ein Versprechen, und tendiert daher dazu, miteinander zu interagieren besser mit anderen promise-basierten code als die herkömmlichen callback-Ansatz. Wenn Ihr Rückruf gibt, ist der zurückgegebene Wert wird verwendet, um gelöst Versprechen.
    InformationsquelleAutor ksimons
  3. 1

    AngularJS ändert den normalen JavaScript-flow, indem Sie Ihren eigenen Ereignis-Verarbeitung-Schleife. Diese teilt dem JavaScript in klassischen und AngularJS-Ausführungskontext. Nur Operationen, die angewendet werden in der AngularJS Ausführungskontext profitieren von AngularJS Daten-Bindung, Ausnahmebehandlung, Eigentum beobachten, etc.

    Mithilfe der AngularJS $timeout-service, wickelte setTimeout ausgeführt werden, die in der AngularJS-Ausführungskontext.

    Weitere Informationen finden Sie unter

    InformationsquelleAutor georgeawg
Schreibe einen Kommentar