Y a-t-il une différence?
Oui. Un Timeout exécute un certain temps après l'appel de setTimeout (); un intervalle s'exécute un certain temps après le déclenchement de l'intervalle précédent.
Vous remarquerez la différence si votre fonction doStuff () prend un certain temps à s'exécuter. Par exemple, si nous représentons un appel à setTimeout / setInterval avec .
, un déclenchement du délai / intervalle avec *
et l'exécution de code JavaScript avec [-----]
, les chronologies ressemblent à:
Timeout:
. * . * . * . * .
[--] [--] [--] [--]
Interval:
. * * * * * *
[--] [--] [--] [--] [--] [--]
La complication suivante est si un intervalle se déclenche alors que JavaScript est déjà occupé à faire quelque chose (comme gérer un intervalle précédent). Dans ce cas, l'intervalle est mémorisé et se produit dès que le gestionnaire précédent termine et renvoie le contrôle au navigateur. Ainsi, par exemple, pour un processus doStuff () qui est parfois court ([-]) et parfois long ([-----]):
. * * • * • * *
[-] [-----][-][-----][-][-] [-]
• représente un tir d'intervalle qui n'a pas pu exécuter son code tout de suite, et a été mis en attente à la place.
Les intervalles essaient donc de «rattraper» pour revenir à la date prévue. Mais ils ne font pas la queue l'un sur l'autre: il ne peut y avoir qu'une seule exécution en attente par intervalle. (S'ils faisaient tous la queue, le navigateur se retrouverait avec une liste toujours plus longue d'exécutions en suspens!)
. * • • x • • x
[------][------][------][------]
x représente un tir d'intervalle qui n'a pas pu être exécuté ou être mis en attente, donc a été rejeté.
Si votre fonction doStuff () prend habituellement plus de temps à s'exécuter que l'intervalle qui lui est défini, le navigateur consommera 100% de CPU en essayant de le réparer et peut devenir moins réactif.
Lequel utilisez-vous et pourquoi?
Chained-Timeout donne un créneau garanti de temps libre au navigateur; Interval essaie de s'assurer que la fonction qu'il exécute s'exécute aussi près que possible de ses heures planifiées, au détriment de la disponibilité de l'interface utilisateur du navigateur.
Je considérerais un intervalle pour les animations ponctuelles que je voulais être aussi fluide que possible, tandis que les délais d'attente chaînés sont plus polis pour les animations en cours qui auraient lieu tout le temps pendant le chargement de la page. Pour des utilisations moins exigeantes (comme une mise à jour triviale qui se déclenche toutes les 30 secondes ou quelque chose), vous pouvez utiliser l'une ou l'autre en toute sécurité.
En termes de compatibilité des navigateurs, setTimeout est antérieur à setInterval, mais tous les navigateurs que vous rencontrerez aujourd'hui prennent en charge les deux. Le dernier retardataire depuis de nombreuses années était IE Mobile dans WinMo <6.5, mais j'espère que cela aussi est maintenant derrière nous.