Quelle est la différence entre $ evalAsync et $ timeout dans AngularJS?

J'utilise AngularJS depuis un petit moment maintenant et j'ai trouvé le besoin d'utiliser $ timeout de temps en temps (il semble généralement que ce soit pour lancer un plugin jQuery).

Récemment, j'ai essayé d'obtenir une compréhension meilleure et plus approfondie du cycle de digestion, et je suis tombé sur la fonction $ evalAsync .

Il semble que cette fonction produit des résultats similaires à $timeout, mais vous ne lui donnez pas de retard. Chaque fois que je l'ai utilisé, $timeoutc'était avec un retard de 0, alors maintenant je me demande si j'aurais dû l'utiliser à la $evalAsyncplace.

Y a-t-il des différences fondamentales entre les deux? Quels cas utiliseriez-vous l'un sur l'autre? J'aimerais avoir une meilleure idée de quand utiliser lequel.

J'ai récemment répondu essentiellement à cette question ici: https://stackoverflow.com/a/17239084/215945 (Cette réponse renvoie à certains échanges github avec Misko.)

Résumer:

• si le code est mis en file d'attente à l'aide de $ evalAsync à partir d'une directive , il devrait s'exécuter après que le DOM ait été manipulé par Angular, mais avant que le navigateur ne rende
• si le code est mis en file d'attente à l'aide de $ evalAsync à partir d'un contrôleur , il doit s'exécuter avant que le DOM n'ait été manipulé par Angular (et avant que le navigateur ne rende) - vous le souhaitez rarement
• si le code est mis en file d'attente à l'aide de $ timeout , il devrait s'exécuter après que le DOM a été manipulé par Angular, et après le rendu du navigateur (ce qui peut provoquer un scintillement dans certains cas)

Pour ceux qui créent des applications complexes, sachez que votre choix a un impact sur les performances. Je voudrais également compléter la réponse de Mark avec plus de détails techniques:

• $ timeout (rappel) attendra que le cycle de digest en cours soit terminé (ie mise à jour angulaire de tout le modèle et du DOM), puis il exécutera son callback - affectant potentiellement le modèle angulaire - puis lancera un full $applysur la racine $ scope, et redigest tout.

• $ evalAsync (callback) , d'autre part, ajoutera le rappel au cycle de résumé actuel ou suivant. Ce qui signifie que si vous êtes dans un cycle de digest (par exemple dans une fonction appelée à partir d'une ng-clickdirective), cela n'attendra rien, le code sera exécuté tout de suite. Si vous êtes dans un appel asynchrone, par exemple a setTimeout, un nouveau cycle de résumé ( $apply) sera déclenché.

Donc, en termes de performances, il est toujours préférable d'appeler $evalAsync, sauf s'il est important pour vous que la vue soit à jour avant d'exécuter votre code, par exemple si vous avez besoin d'accéder à un attribut DOm tel que la largeur des éléments, etc.

Si vous souhaitez plus de détails sur la distinction entre $ timeout, $ evalAsync, $ digest, $ apply, je vous invite à lire ma réponse sur cette autre question: https://stackoverflow.com/a/23102223/1501926

Assurez-vous également de lire la documentation :

Le $ evalAsync ne donne aucune garantie quant au moment où l'expression sera exécutée, seulement que:

• il s'exécutera après la fonction qui a programmé l'évaluation (de préférence avant le rendu DOM).
• au moins un cycle $ digest sera exécuté après l'exécution de l'expression.

Remarque: si cette fonction est appelée en dehors d'un cycle $ digest, un nouveau cycle $ digest sera planifié . Cependant, il est recommandé de toujours appeler le code qui change le modèle à partir d'un appel $ apply. Cela inclut le code évalué via $ evalAsync.