{"id":174,"date":"2014-12-04T09:41:49","date_gmt":"2014-12-04T08:41:49","guid":{"rendered":"http:\/\/lalloue.fr\/blog\/?p=174"},"modified":"2014-12-31T14:01:26","modified_gmt":"2014-12-31T13:01:26","slug":"angularjs-oui-au-timeout-non-au-settimeout","status":"publish","type":"post","link":"http:\/\/lalloue.fr\/blog\/angularjs-oui-au-timeout-non-au-settimeout\/","title":{"rendered":"AngularJS: OUI au $timeout, NOn au setTimeout"},"content":{"rendered":"

\"AngularJS-large\"<\/a><\/p>\n

Pour tous les habitu\u00e9s du Javascript, il arrive souvent d’avoir besoin d’un ‘timeout’ (ou pause en fran\u00e7ais) avant d\u2019ex\u00e9cuter une action.
\nEt pour cela la premi\u00e8re chose qui nous vient \u00e0 l’id\u00e9e c’est la m\u00e9thode\u00a0setTimeout()<\/strong>.<\/p>\n

OUI, mais…pas avec AngularJS !<\/p>\n

<\/p>\n

Pourquoi pas avec Angular?<\/h3>\n

Parce que si vous utilisez la m\u00e9thode\u00a0setTimeout()<\/strong> avec AngularJS (ce qui est tout \u00e0 fait faisable finalement), vous allez \u00eatre oblig\u00e9 d’utiliser la m\u00e9thode\u00a0$scope.$apply()\u00a0<\/strong>pour vous assurer que tous les changements effectu\u00e9s dans le scope auront bien \u00e9t\u00e9 r\u00e9percut\u00e9s partout.<\/p>\n

AngularJS fournit\u00a0une m\u00e9thode sp\u00e9cialement con\u00e7u pour ce cas :\u00a0$timeout()<\/strong><\/p>\n

Cette m\u00e9thode appelle elle-m\u00eame \u00a0$apply() pour nous et va s’assurer que toutes les donn\u00e9es soient bien renseign\u00e9es dans le scope. Et on n’a rien \u00e0 faire d’autre !<\/p>\n

Et qu’est ce que \u00e7a donne dans la pratique?<\/h3>\n

\u00c7a donne quelque chose comme \u00e7a :<\/p>\n

\r\nfunction MonController($scope, $timeout) {\r\n    var timer;\r\n    $scope.timeInMs = 0;\r\n\r\n    var maFonction = function(){\r\n        timer = $timeout(function(){\r\n            $scope.timeInMs += 1000;\r\n            timer = $timeout(maFonction, 1000);\r\n        }, 1000);\r\n    };\r\n\r\n    maFonction();\r\n\r\n    $scope.$on('$destroy',function(){\r\n        $timeout.cancel(timer);\r\n    });\r\n}\r\n<\/pre>\n
Donc on a ici un Controller tout simple qui s\u2019appelle “MonController”.
\nDans ce Controller je d\u00e9clare un ‘timer’ qui sera renseign\u00e9 par la fonction\u00a0$timeout toutes les 1000 millisecondes.<\/p>\n
Et voici\u00a0la d\u00e9mo pour vous prouver que tout cela fonctionne :<\/p>\n\n\n