Jaka jest zaleta używania $timeout w AngularJS zamiast window.setTimeout?

Question

Jaka jest zaleta używania $timeout w AngularJS zamiast window.setTimeout?

Miałem sugestię, aby zaimplementować limit czasu taki jak ten:

  $timeout(function() {

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

  }, 2000);
};

Może mi ktoś powiedzieć jaki jest powód / zaleta używania tego zamiast używania setTimeout?

50

angularjs settimeout

Author: georgeawg, 2013-10-26

Source

3 answers

zawija Twój callback dla ciebie automatycznie w bloku try/catch i pozwala na obsługę błędów w usłudze $ exceptionHandler: http://docs.angularjs.org/api/ng.$exceptionHandler
zwraca obietnicę, a tym samym ma tendencję do lepszej współpracy z innym kodem opartym na obietnicy niż tradycyjne podejście oddzwaniania. Gdy funkcja zwrotna powraca, zwracana wartość jest używana do rozwiązania obietnicy.

20

Author: ksimons,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-26 17:41:42

AngularJS modyfikuje normalny przepływ JavaScript, zapewniając własną pętlę przetwarzania zdarzeń. W ten sposób JavaScript dzieli się na klasyczny i AngularJS kontekst wykonania. Tylko operacje, które są stosowane w kontekście wykonywania AngularJS, będą korzystać z wiązania danych AngularJS, obsługi wyjątków, monitorowania właściwości itp.

Używając usługi AngularJS $timeout, zawinięty setTimeout zostanie wykonany w kontekście wykonania AngularJS.

Aby uzyskać więcej informacji, zobacz

1

Author: georgeawg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-02 22:26:53

score 64 · Accepted Answer

W podstawowych słowach $timeout odnosi się do angularjs, gdy setTimeout - do JavaScript.

Jeśli nadal myślisz o użyciu setTimeout dlatego musisz wywołać $scope.$apply() po

na marginesie

Proponuję przeczytać Jak "myśleć w AngularJS", jeśli mam tło jQuery? post

I AngularJS: użyj $timeout, nie setTimeout

Przykład 1: $ timeout

   $scope.timeInMs = 0;

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

Przykład 2: setTimeout (same logika)

 $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 zwraca również obietnicę

JS

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

HTML

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

$timeout również uruchamia cykl digest

Rozważ, że mamy jakiś kod strony 3D (nie AngularJS), taki jak wtyczka Cloudinary, która przesyła plik i zwraca nam "progress" procentowe oddzwanianie.

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

Chcemy zaktualizować nasz UI aka $scope.file = file_;

Więc pusty $timeout w tym celu należy wykonać następujące czynności: uruchomienie cyklu digest i $scope.file zaktualizowane przez 3d party zostaną ponownie renderowane w GUI