Question setTimeout ou setInterval?


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 utiliser setTimeout et setInterval?


675
2018-04-08 13:11


origine


Réponses:


Essentiellement, ils essaient de faire la même chose, mais setInterval approche sera plus précise que la setTimeout approche, depuis setTimeout attend 1000ms, exécute la fonction, puis définit un autre délai d'expiration. Donc, la période d'attente est en fait un peu plus de 1000ms (ou beaucoup plus si votre fonction prend beaucoup de temps à s'exécuter).

Bien qu'on puisse penser que setInterval va exécuter exactement chaque 1000ms, il est important de noter que setInterval sera également retardé, puisque JavaScript n'est pas un langage multithread, ce qui signifie que - s'il y a d'autres parties du script en cours - l'intervalle devra attendre que cela se termine.

Dans ce violon, vous pouvez clairement voir que le délai d'attente sera derrière, alors que l'intervalle est presque tout le temps à presque 1 appel / seconde (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 va essayer de fonctionner 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 un minuterie auto-ajustable (qui est essentiellement un temporisateur basé sur le timeout qui s'ajuste constamment pour le retard qu'il est créé)


592
2018-04-08 13:14



Y a-t-il une différence?

Oui. Un Timeout s'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 () met du temps à s'exécuter. Par exemple, si nous représentons un appel à setTimeout / setInterval avec ., un déclenchement du timeout / intervalle avec * et l'exécution de code JavaScript avec [-----], les délais 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 se termine et renvoie le contrôle au navigateur. Donc par exemple pour un processus doStuff () 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.

Ainsi, les intervalles tentent de «rattraper» pour revenir à temps. Mais, ils ne font pas la file les uns sur les autres: il ne peut y avoir qu'une seule exécution en attente par intervalle. (S'ils étaient tous en file d'attente, le navigateur se retrouverait avec une liste toujours plus longue d'exécutions en cours!)

.    *    •    •    x    •    •    x
     [------][------][------][------]

x représente un tir d'intervalle qui ne pouvait pas être exécuté ou être en attente, et qui a donc été ignoré.

Si votre fonction doStuff () prend habituellement plus de temps à s'exécuter que l'intervalle qui lui est assigné, le navigateur mange 100% du 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; L'intervalle essaie de s'assurer que la fonction qu'il exécute est aussi proche que possible de ses heures planifiées, au détriment de la disponibilité de l'interface utilisateur du navigateur.

Je voudrais considérer un intervalle pour les animations uniques que je voulais être aussi lisse que possible, tandis que les délais d'attente enchaînés sont plus polis pour les animations en cours qui auraient lieu tout le temps pendant que la page est chargée. Pour des utilisations moins exigeantes (comme un feuillet de mise à jour trivial toutes les 30 secondes ou quelque chose), vous pouvez utiliser l'un ou l'autre en toute sécurité.

En termes de compatibilité avec les navigateurs, setTimeout est antérieur à setInterval, mais tous les navigateurs que vous rencontrerez aujourd'hui prennent en charge les deux. Le dernier traînard depuis de nombreuses années était IE Mobile dans WinMo <6.5, mais j'espère que c'est aussi derrière nous.


628
2018-04-08 20:13



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 à plusieurs reprises un script spécifié lorsque l'intervalle est atteint. Cela devrait ne pas être imbriqué dans sa fonction de rappel par l'auteur du script pour le faire en boucle, car il boucles par défaut. Il continuera à tirer à intervalle, sauf si vous appelez clearInterval().

Si vous voulez faire un code de boucle pour des animations ou une coche d'horloge, utilisez setInterval().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout ()

setTimeout() est une méthode d'exécution de code basée sur le temps qui n'exécutera qu'un script une fois quand l'intervalle est atteint. Ce sera ne pas répétez à nouveau, sauf si vous l'engrenez pour boucler le script en imbriquant le setTimeout() objet à l'intérieur de la fonction qu'il appelle à exécuter. Si elle est adaptée à la boucle, elle continuera à tirer à intervalle, sauf si vous appelez clearTimeout().

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

Si vous voulez que quelque chose se produise une fois après une période de temps spécifiée, utilisez setTimeout(). C'est parce qu'il s'exécute seulement une fois quand l'intervalle spécifié est atteint.


82
2017-08-14 05:12



Le setInterval facilite l'annulation de l'exécution future de votre code. Si vous utilisez setTimeout, vous devez garder trace de l'identifiant de la minuterie au cas où vous souhaiteriez l'annuler plus tard.

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

contre

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);

40
2018-04-08 13:25



Je trouve le setTimeout méthode plus facile à utiliser si vous voulez annuler le délai d'expiration:

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();

En outre, si quelque chose ne va pas dans la fonction, il cessera de répéter à la première erreur, au lieu de répéter l'erreur toutes les secondes.


20
2018-04-08 14:20



La différence est dans leurs buts.

setInterval()
   -> executes a function, over and over again, at specified time intervals  

setTimeout()
   -> executes a function, once, after waiting a specified number of milliseconds

C'est aussi simple que ça

Des détails plus élaborés ici http://javascript.info/tutorial/settimeout-setinterval


14
2018-01-11 10:16



Lorsque vous exécutez une fonction à l'intérieur de setInterval, ce qui dure plus de temps que timeout-> le navigateur sera bloqué.

 - Par exemple., faire des choses() prend 1500 sec. être exécuté et vous faites: setInterval (doStuff, 1000);
1) Run du navigateur faire des choses() ce qui prend 1,5 sec. être éxecuté;
2) Après ~ 1 seconde, il essaie de courir faire des choses() encore. Mais précédent faire des choses() est toujours exécuté-> alors le navigateur ajoute cette exécution à la file d'attente (pour courir après que le premier ait été fait).
3,4, ..) Le même ajout à la file d'exécution pour les prochaines itérations, mais faire des choses()du précédent sont toujours en cours ...
  En conséquence, le navigateur est bloqué.

Pour éviter ce comportement, le meilleur moyen est d'exécuter setTimeout à l'intérieur de setTimeout pour émuler setInterval.
Pour corriger les délais entre les appels setTimeout, vous pouvez utiliser alternative auto-correctrice à l'option setInterval de JavaScript technique.


11
2018-04-26 17:42