Autant que je sache, ces deux morceaux de javascript se comportent de la même manière:
Option A:
function myTimeoutFunction()
{
doStuff();
setTimeout(myTimeoutFunction, 1000);
}
myTimeoutFunction();
Option B:
function myTimeoutFunction()
{
doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);
Y a-t-il une différence entre l'utilisation de setTimeout et setInterval ?
javascript
setinterval
Damovisa
la source
la source
Réponses:
Ils essaient essentiellement de faire la même chose, mais l'
setInterval
approche sera plus précise que l'setTimeout
approche, carsetTimeout
attend 1000 ms, exécute la fonction et définit ensuite un autre délai d'expiration. Ainsi, la période d'attente est en fait un peu plus de 1000 ms (ou beaucoup plus si votre fonction prend beaucoup de temps à exécuter).Bien que l'on puisse penser que
setInterval
cela s'exécutera exactement tous les 1000 ms, il est important de noter quesetInterval
cela retardera également, car JavaScript n'est pas un langage multithread, ce qui signifie que - s'il y a d'autres parties du script en cours d'exécution - l'intervalle aura attendre que cela se termine.Dans ce violon , vous pouvez clairement voir que le délai d'attente prendra du retard, tandis que l'intervalle est presque tout le temps à presque 1 appel / seconde (ce que le script essaie de faire). Si vous modifiez la variable de vitesse en haut à quelque chose de petit comme 20 (ce qui signifie qu'elle essaiera de s'exécuter 50 fois par seconde), l'intervalle n'atteindra jamais tout à fait une moyenne de 50 itérations par seconde.
Le retard est presque toujours négligeable, mais si vous programmez quelque chose de vraiment précis, vous devriez opter pour une minuterie auto-ajustable (qui est essentiellement une minuterie basée sur le délai d'attente qui s'ajuste constamment en fonction du retard créé)
la source
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 à: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 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.
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.
la source
setInterval ()
setInterval()
est une méthode d'exécution de code basée sur un intervalle de temps qui a la capacité native d'exécuter de manière répétée un script spécifié lorsque l'intervalle est atteint. Il ne doit pas être imbriqué dans sa fonction de rappel par l'auteur du script pour le faire boucler, car il boucle par défaut . Il continuera à tirer à intervalles, sauf si vous appelezclearInterval()
.Si vous voulez boucler du code pour des animations ou sur un tick d'horloge, utilisez
setInterval()
.setTimeout ()
setTimeout()
est une méthode d'exécution de code basée sur le temps qui n'exécutera un script qu'une seule fois lorsque l'intervalle sera atteint. Il ne se répétera pas à moins que vous ne l'utilisiez pour boucler le script en imbriquant l'setTimeout()
objet à l'intérieur de la fonction qu'il appelle à exécuter. S'il est adapté à la boucle, il continuera de tirer à l'intervalle, sauf si vous appelezclearTimeout()
.Si vous voulez que quelque chose se produise une fois après une période spécifiée, utilisez
setTimeout()
. En effet, il ne s'exécute qu'une seule fois lorsque l'intervalle spécifié est atteint.la source
setTimeout()
exemple du PO ,setTimeout()
est appelé récursivement , alors qu'ilsetInterval()
ne l'est pas.SetInterval facilite l'annulation de l'exécution future de votre code. Si vous utilisez setTimeout, vous devez garder une trace de l'ID de la minuterie au cas où vous souhaiteriez l'annuler plus tard.
contre
la source
setTimeout
est plutôt que d'enregistrer l'id ajouter uneif
instruction pour définir uniquement le délai d'expiration suivant lorsqu'une condition est vraie.doStuff
car l'ID n'est pas valide. Cependant, il n'est pas vraiment nécessaire d'enregistrer les identifiants de délai d'expiration. Au lieu de cela, vous pouvez simplement arrêter d'appelersetTimeout
.Je trouve la
setTimeout
méthode plus facile à utiliser si vous souhaitez annuler le délai:De plus, si quelque chose tournait mal dans la fonction, elle cesserait simplement de se répéter à la première erreur, au lieu de répéter l'erreur toutes les secondes.
la source
La différence réside dans leurs objectifs.
C'est aussi simple que ça
Des détails plus élaborés ici http://javascript.info/tutorial/settimeout-setinterval
la source
setTimeout()
exemple du PO ,setTimeout()
est appelé récursivement , alors qu'ilsetInterval()
ne l'est pas.Lorsque vous exécutez une fonction à l'intérieur de setInterval, qui fonctionne plus longtemps que timeout-> le navigateur sera bloqué.
- Par exemple, doStuff () prend 1500 sec. à exécuter et vous le faites: setInterval (doStuff, 1000);
1) Le navigateur exécute doStuff () qui prend 1,5 seconde. être éxecuté;
2) Après environ 1 seconde, il essaie de réexécuter doStuff () . Mais la précédente doStuff () est toujours exécutée-> donc le navigateur ajoute cette exécution à la file d'attente (à exécuter après la première exécution).
3,4, ..) Même ajout à la file d'attente d'exécution pour les prochaines itérations, mais doStuff () de la précédente est toujours en cours ...
En conséquence, le navigateur est bloqué.
Pour éviter ce problème, la meilleure façon consiste à exécuter setTimeout dans setTimeout pour émuler setInterval .
Pour corriger les délais d'attente entre les appels setTimeout, vous pouvez utiliser une alternative à correction automatique à la technique setInterval de JavaScript .
la source
J'utilise setTimeout.
Apparemment, la différence est que setTimeout appelle la méthode une fois, setInterval l'appelle de manière répétée.
Voici un bon article expliquant la différence: Tutoriel: Minuteries JavaScript avec setTimeout et setInterval
la source
Votre code aura des intervalles d'exécution différents, et dans certains projets, tels que les jeux en ligne, il n'est pas acceptable. Tout d'abord, que devez-vous faire, pour que votre code fonctionne avec les mêmes intervalles, vous devez remplacer "myTimeoutFunction" par ceci:
Après ce changement, il sera égal à
Mais, vous n'aurez toujours pas de résultat stable, car JS est monothread. Pour l'instant, si le thread JS est occupé par quelque chose, il ne pourra pas exécuter votre fonction de rappel et son exécution sera différée de 2 à 3 ms. Si vous avez 60 exécutions par seconde, et chaque fois que vous avez un délai aléatoire de 1 à 3 secondes, ce ne sera absolument pas acceptable (après une minute, le délai sera d'environ 7200 ms), et je peux vous conseiller d'utiliser quelque chose comme ceci:
Ce code garantira une période d'exécution stable. Même le thread sera occupé et votre code sera exécuté après 1005 ms, la prochaine fois il aura un délai d'expiration de 995 ms et le résultat sera stable.
la source
J'ai fait un test simple de
setInterval(func, milisec)
, car j'étais curieux de savoir ce qui se passe lorsque la consommation de temps de fonction est supérieure à la durée de l'intervalle.setInterval
va généralement planifier la prochaine itération juste après le début de l'itération précédente, à moins que la fonction est toujours en cours . Si c'est le cas,setInterval
attendra jusqu'à la fin de la fonction. Dès qu'elle se produit, la fonction est immédiatement relancée - il n'y a pas d'attente pour la prochaine itération selon le calendrier (comme ce serait dans des conditions sans fonction de dépassement de temps). Il n'y a également aucune situation avec des itérations parallèles en cours d'exécution.J'ai testé cela sur Chrome v23. J'espère que c'est une implémentation déterministe sur tous les navigateurs modernes.
Sortie console:
La
wait
fonction n'est qu'un assistant de blocage de threads - appel ajax synchrone qui prend exactement 2500 millisecondes de traitement côté serveur:la source
setTimout
appel récursif est préférable.Pour le voir un peu différemment: setInterval assure qu'un code est exécuté à chaque intervalle donné (c'est-à-dire 1000 ms, ou combien vous spécifiez) tandis que setTimeout définit le temps qu'il «attend» pour exécuter le code. Et comme il faut des millisecondes supplémentaires pour exécuter le code, il s'ajoute à 1000 ms et ainsi, setTimeout s'exécute à nouveau à des moments inexacts (plus de 1000 ms).
Par exemple, les temporisations / comptes à rebours ne sont pas effectués avec setTimeout, ils le sont avec setInterval, pour garantir qu'il ne tarde pas et que le code s'exécute à l'intervalle donné exact.
la source
SetInterval et setTimeout renvoient un identifiant de temporisation que vous pouvez utiliser pour annuler l'exécution, c'est-à-dire avant le déclenchement des délais. Pour annuler, appelez clearInterval ou clearTimeout comme ceci:
En outre, les délais d'attente sont automatiquement annulés lorsque vous quittez la page ou fermez la fenêtre du navigateur.
la source
Vous pouvez valider la réponse de Bobince par vous-même lorsque vous exécutez le javascript suivant ou vérifiez ce JSFiddle
la source
Eh bien, setTimeout est meilleur dans une situation, comme je viens de l'apprendre. J'utilise toujours setInterval, qu'il me reste à exécuter en arrière-plan pendant plus d'une demi-heure. Lorsque je suis revenu à cet onglet, le diaporama (sur lequel le code a été utilisé) changeait très rapidement, au lieu de toutes les 5 secondes qu'il devrait avoir. En fait, cela se reproduit à mesure que je le teste davantage et que ce soit la faute du navigateur ou non n'est pas important, car avec setTimeout, cette situation est complètement impossible.
la source
La différence est évidente dans la console:
la source
Il suffit d'ajouter à ce qui a déjà été dit, mais la version setTimeout du code atteindra également le
Maximum call stack size
qui l'empêchera de fonctionner. Puisqu'il n'y a pas de cas de base pour la fonction récursive, vous ne pouvez donc pas l'exécuter indéfiniment.la source
setTimeout () exécutera l'expression seulement UNE FOIS et cela après cette durée spécifiée.
cependant,
setInterval () exécutera l'expression dans INFINITE-LOOP après chaque durée spécifiée.
la source
Je pense
SetInterval
et je suisSetTimeout
différent.SetInterval
exécute le bloc en fonction de l'heure définie tandis que,SetTimeout
exécute le bloc de code une fois.Essayez ces ensembles de codes après les secondes du compte à rebours:
puis essayez
Vous pouvez voir les différences par vous-même.
la source