AngularJS: OUI au $timeout, NOn au setTimeout

Pour tous les habitués du Javascript, il arrive souvent d’avoir besoin d’un ‘timeout’ (ou pause en français) avant d’exécuter une action.
Et pour cela la première chose qui nous vient à l’idée c’est la méthode setTimeout().

OUI, mais…pas avec AngularJS !

Pourquoi pas avec Angular?

Parce que si vous utilisez la méthode setTimeout() avec AngularJS (ce qui est tout à fait faisable finalement), vous allez être obligé d’utiliser la méthode $scope.$apply() pour vous assurer que tous les changements effectués dans le scope auront bien été répercutés partout.

AngularJS fournit une méthode spécialement conçu pour ce cas : $timeout()

Cette méthode appelle elle-même  $apply() pour nous et va s’assurer que toutes les données soient bien renseignées dans le scope. Et on n’a rien à faire d’autre !

Et qu’est ce que ça donne dans la pratique?

Ça donne quelque chose comme ça :

function MonController($scope, $timeout) {
    var timer;
    $scope.timeInMs = 0;

    var maFonction = function(){
        timer = $timeout(function(){
            $scope.timeInMs += 1000;
            timer = $timeout(maFonction, 1000);
        }, 1000);
    };

    maFonction();

    $scope.$on('$destroy',function(){
        $timeout.cancel(timer);
    });
}

Donc on a ici un Controller tout simple qui s’appelle “MonController”.
Dans ce Controller je déclare un ‘timer’ qui sera renseigné par la fonction $timeout toutes les 1000 millisecondes.

Et voici la démo pour vous prouver que tout cela fonctionne :

Petite remarque de fin, vous avez surement remarqué la méthode $timeout.cancel appelée lors de l’evenement ‘destroy’ du scope.
Cette méthode est très importante car elle permet de ‘close’ (fermer) le timeout proprement pour qu’il ne continue pas à s’exécuter alors que vous avez changé de page par exemple.

Globalement c’est une bonne pratique de toujours vérifier si l’on peut fermer / arrêter / close une execution qui tourne en tâche de fond comme le timeout.