setTimeout ou setInterval?

Question

Aussi loin que je peux dire, 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);

Quelle est la différence entre l'utilisation de setTimeout et setInterval? Lequel utilisez-vous et pourquoi?

Answer 1

La différence est subtile, je crois que la fonction setInterval code s'exécute chaque 1000ms exactement, alors que le setTimeout attend 1000ms, exécute la fonction, qui prend un peu de ms, puis fixe un autre délai. Si la période d'attente est en fait supérieure à 1000ms.

Answer 2

Quelle est la différence?

Oui. Un Délai d'attente exécute un certain laps de temps après setTimeout() est appelée; un Intervalle exécute un certain laps de temps après l'intervalle précédent tiré.

Vous remarquerez la différence si votre doStuff() la fonction prend un certain temps à s'exécuter. Par exemple, si nous représentons un appel à setTimeout/setInterval avec ., un tir de la temporisation/intervalle de * et l'exécution de code JavaScript avec [-----], les délais ressembler à:

Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]

La prochaine complication est que si un intervalle de feux alors que JavaScript est déjà occupé à faire quelque chose (comme la manipulation d'un intervalle précédent). Dans ce cas, l'intervalle est de rappeler, et se produit dès que la précédente gestionnaire termine et retourne le contrôle au navigateur. Donc par exemple pour un doStuff() processus qui est parfois court ([-]) et parfois long ([-----]):

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

• représente un intervalle de tir qui n'a pas pu exécuter son code tout de suite, et a été prise jusqu'à la place.

Si les intervalles d'essayer de "rattraper" pour reprendre le rythme. Mais, ils n'ont pas de file d'attente de l'un sur l'autre: il ne peut jamais être une exécution en attente par intervalle. (Si ils sont tous en file d'attente, le navigateur à gauche avec une liste sans cesse croissante de l'encours des exécutions!)

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

x représente un intervalle de tir qui n'a pas pu exécuter ou mis en attente, de sorte que la place a été écartée.

Si votre doStuff() la fonction prend habituellement plus de temps pour exécuter que l'intervalle est défini pour elle, le navigateur va manger 100% de CPU en essayant de service, et peut devenir moins sensible.

Lequel utilisez-vous et pourquoi?

Enchaînés-Timeout donne une garantie de la fente de temps libre pour le navigateur; Intervalle essaie de faire en sorte que la fonction elle est en cours d'exécution exécute aussi proche que possible de ses heures programmées, au détriment de navigateur de l'INTERFACE utilisateur de la disponibilité.

Je considère un intervalle de temps pour un hors d'animations que j'ai voulu être aussi lisse que possible, tout en enchaînés délais d'attente sont plus poli pour la poursuite des animations qui auront lieu tout le temps, tandis que la page est chargée. Pour les moins exigeants utilise (comme un banal programme de mise à jour de cuisson toutes les 30 secondes ou quelque chose), vous pouvez utiliser en toute sécurité.

En termes de compatibilité de navigateur, setTimeout est antérieure à setInterval, mais tous les navigateurs, vous allez rencontrer aujourd'hui, le soutien à la fois. Le dernier traine depuis de nombreuses années a été IE Mobile dans WinMo <6.5, mais nous espérons que trop est maintenant derrière nous.

Answer 3

setInterval()

setInterval() est un intervalle de temps basée sur l'exécution de code à la méthode qui a la capacité native à plusieurs reprises exécuter un script spécifié lorsque l'intervalle est atteint. Il devrait pas être imbriqués dans sa fonction de rappel par l'auteur du script pour faire tourner en boucle, puisqu'il boucle par défaut. Il va continuer à tirer à l'intervalle, à moins que vous appelez clearInterval().

Si vous souhaitez faire une boucle de code pour les animations ou sur une horloge, puis utilisez setInterval().

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

setTimeout()

setTimeout() est une base de temps d'exécution de code à la méthode à exécuter un script, seulement une seule fois lorsque l'intervalle est atteint. Il va pas répéter à nouveau, sauf si vous vous préparez à boucle, le script par l'imbrication de l' setTimeout() objet à l'intérieur de la fonction, il appelle à exécuter. Si orientée vers la boucle, il va continuer à tirer à l'intervalle, à moins que 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 seule fois, après une certaine période de temps, puis utilisez setTimeout(). C'est parce qu'elle n'exécute qu'une seule fois lorsque l'intervalle de temps spécifié est atteint.

Answer 4

La fonction setInterval rend plus facile pour annuler l'avenir de l'exécution de votre code. Si vous utiliser setTimeout, vous devez garder une trace de l'id de minuterie dans le cas où vous souhaitez annuler par la suite.

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

myTimeoutFunction();

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

rapport

function myTimeoutFunction()
{
    doStuff();
}

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

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

Answer 5

Je trouve l' setTimeout méthode plus facile à utiliser si vous souhaitez annuler le délai d'attente:

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

myTimeoutFunction();

Aussi, si quelque chose va mal dans la fonction, il va juste s'arrêter à la première erreur, au lieu de répéter le message d'erreur à chaque seconde.