setTimeout ou setInterval?

Question

Pour autant que je peux dire, ces deux morceaux de javascript se comportent de la même façon:

Option A:

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

myTimeoutFunction();

Option B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

Y at-il une différence entre l'utilisation setTimeout et setInterval ?

Answer 1

Ils essaient essentiellement de faire la même chose, mais l'approche setInterval sera plus précis que l'approche setTimeout, puisque setTimeout attend 1000ms, exécute la fonction et définit alors un autre délai d'attente. Ainsi, la période d'attente est en fait un peu plus de 1000ms (ou beaucoup plus si votre fonction prend beaucoup de temps pour exécuter).

Altough on pourrait penser que setInterval exécutera exactement tous les 1000ms, il est important de noter que setInterval retardera aussi, car JavaScript est pas une langue multi-thread, ce qui signifie que - s'il d'autres parties du fonctionnement du script -. l'intervalle devra attendre que à la fin

vous pouvez voir clairement cette Fiddle, que le délai d'attente tombera derrière, tandis que l'intervalle est presque tout le temps à presque 1 appel / seconde (le script qui tente de le faire). Si vous changez la variable de vitesse en haut à quelque chose de petit comme 20 (ce qui signifie qu'il va essayer de courir 50 fois par seconde), l'intervalle 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 aller pour autoréglable minuterie (qui est essentiellement un chronomètre en fonction de délai d'attente qui s'ajuste constamment le retard qu'il a créé)

Answer 2

  

Y at-il 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 fonction doStuff () prend un certain temps à exécuter. Par exemple, si nous représentons un appel à setTimeout / setInterval avec ., un tir du délai d'attente / intervalle avec * et exécution de code JavaScript avec [-----], les délais ressemblent:

Timeout:

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

Interval:

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

La prochaine complication est si un feu d'intervalle tandis que JavaScript est déjà occupé (comme la manipulation d'un intervalle précédent). Dans ce cas, l'intervalle est mémorisé, et arrive dès que les finitions du gestionnaire précédent et retourne le contrôle au navigateur. Ainsi, par exemple pour un processus doStuff () qui est parfois courte ([-]) et parfois longue ([-----]):

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

• représente un tir d'intervalle qui ne pouvait pas exécuter son code tout de suite, et a été fait en attendant la place.

intervalles tentent de revenir sur le calendrier « rattraper ». Mais, ils ne font la queue pas l'un sur l'autre: il ne peut jamais être une attente d'exécution par intervalle. (Si tous faisaient la queue, le navigateur se retrouverait avec une liste toujours croissante d'exécutions en suspens!)

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

x représente un tir d'intervalle qui ne pouvait pas exécuter ou être présentées dans l'attente, donc au lieu a été mis au rebut.

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

  

Quel utilisez-vous et pourquoi?

Chained-Timeout donne une fente garantie de temps libre au navigateur; Intervalle essaie d'assurer la fonction qu'il est en cours d'exécution exécute le plus près possible de ses horaires, 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 lisse que possible, tandis que les délais d'attente chaînés sont plus polis pour les animations en cours qui ont lieu tout le temps alors que la page est chargée. Pour des utilisations moins exigeantes (comme un updater trivial tir toutes les 30 secondes ou quelque chose), vous pouvez utiliser en toute sécurité soit.

En ce qui concerne la compatibilité des navigateurs, setTimeout setInterval est antérieure, mais supporte tous les navigateurs, vous rencontrerez aujourd'hui à la fois. Le dernier retardataire depuis de nombreuses années était IE Mobile dans WinMo <6.5, mais nous espérons que trop est maintenant derrière nous.

Answer 3

setInterval ()

setInterval() est un code basé sur l'intervalle de temps procédé d'exécution qui a la capacité native pour exécuter de façon répétée un script spécifié lorsque l'intervalle est atteinte. Il devrait pas imbriquer dans sa fonction de rappel par l'auteur du script pour faire boucle, puisqu'il boucles par défaut . Il gardera tir à l'intervalle, sauf si vous appelez clearInterval().

Si vous voulez coder en boucle pour les animations ou sur une tique d'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 méthode basée sur le temps d'exécution de code qui exécutera seulement un script une fois lorsque l'intervalle est atteint. Il pas répéter à nouveau à moins que vous embrayez à boucle le script en imbriquant l'objet setTimeout() à l'intérieur de la fonction qu'il appelle à exécuter. Si adaptée à la boucle, il gardera tir à l'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 quelque chose se produise une fois après une période de temps, puis utilisez setTimeout(). C'est parce qu'il exécute un seul moment où l'intervalle spécifié est atteint.

Answer 4

Le setInterval facilite l'annulation future exécution de votre code. Si vous utilisez setTimeout, vous devez garder une trace de l'ID de minuterie dans le cas où vous souhaitez annuler ultérieurement.

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);

Answer 5

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

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

myTimeoutFunction();

En outre, si quelque chose allait mal tourner dans la fonction, il va simplement cesser de répéter à la première erreur de temps, au lieu de répéter l'erreur à chaque seconde.

Answer 6

La différence est très à leurs fins.

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

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

Il est aussi simple que cela

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

Answer 7

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

- Par ex, doStuff () prend 1500 sec. pour être exécuter et vous faites: setInterval (doStuff, 1000);
1) run navigateur doStuff () qui prend 1,5 sec. être éxecuté;
2) Après environ 1 seconde, il tente d'exécuter doStuff () à nouveau . Mais précédent doStuff () est toujours executed-> si navigateur ajoute cette course à la file d'attente (pour exécuter après la première est fait).
3,4, ..) La même ajoutant à la file d'attente d'exécution pour les itérations suivantes, mais doStuff () précédent sont toujours en cours ...
En tant que result- le navigateur est bloqué.

Pour éviter ce comportement, la meilleure façon est de lancer setTimeout à l'intérieur setTimeout à imiter setInterval .
Pour corriger les délais d'attente entre les appels setTimeout, vous pouvez utiliser auto-correction alternative à la technique setInterval de JavaScript.

Answer 8

J'utilise setTimeout.

Apparemment, la différence est setTimeout appelle la méthode une fois, setInterval appelle repeatdly.

Voici un bon article expliquant la différence: Tutoriel: minuteries JavaScript avec setTimeout et setInterval

Answer 9

Je l'ai fait simple test de setInterval(func, milisec), parce que je suis curieux de savoir ce qui se passe quand la consommation de temps de fonction est supérieure à la durée d'intervalle.

setInterval sera généralement calendrier la prochaine itération juste après la start de l'itération précédente, à moins que la fonction est toujours en cours . Si oui, setInterval attendra, jusqu'à ce que la fonction se termine. Dès qu'il arrive, la fonction est immédiatement tiré à nouveau - il n'y a pas d'attente pour l'itération suivante selon le calendrier prévu (car il serait dans des conditions sans temps dépassé la fonction). Il y a aussi pas de situation avec des itérations parallèles en cours d'exécution.

Je l'ai testé cela sur Chrome v23. J'espère que la mise en œuvre est déterministe dans tous les navigateurs modernes.

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

sortie de la console:

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

La fonction wait est juste un auxiliaire de blocage de fil - appel synchrone Ajax qui prend exactement 2500 millisecondes de traitement au niveau du côté serveur:

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

Answer 10

Votre code aura différentes intevals d'exécution, et dans certains projets, tels que les jeux en ligne, il n'est pas acceptable. Tout d'abord, que devez-vous faire pour rendre votre travail de code avec les mêmes intevals, vous devriez changer « myTimeoutFunction » à ceci:

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

Après ce changement, il sera égal à

function myTimeoutFunction()
{
    doStuff();
}
myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

Mais, vous avez pas encore résultat stable, parce que JS est mono-thread. Pour l'instant, si fil JS sera occupé à quelque chose, il ne sera pas en mesure d'exécuter votre fonction de rappel et l'exécution sera reportée pour 2-3 msec. Est que vous avez 60 exécutions par seconde, et chaque fois que vous avez aléatoire retard 1-3 secondes, il sera absolument pas acceptable (au bout d'une minute, il sera autour de retard 7200 msec), et je peux conseiller d'utiliser quelque chose comme ceci:

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

Ce code garantira la période d'exécution stable. Même fil sera occupé, et votre code sera exécuté après 1005 msecondes, la prochaine fois il aura délai d'attente pour 995 msec, et le résultat sera stable.

Answer 11

Pour regarder un peu différemment: setInterval assure qu'un code est exécuté à chaque intervalle de temps donné (à savoir 1000ms, ou combien vous spécifiez) tandis que setTimeout définit le temps qu'il « attend jusqu'à ce que » il exécute le code. Et comme il prend millisecondes supplémentaires pour exécuter le code, il ajoute à 1000ms et donc, setTimeout Réexécute parfois inexactes (sur 1000ms).

Par exemple, minuteries / countdowns ne sont pas faites avec setTimeout, ils sont faits avec setInterval, pour assurer qu'il ne retarde pas et le code fonctionne à l'intervalle exact donné.

Answer 12

Les deux setInterval et setTimeout retourner un identifiant de minuterie que vous pouvez utiliser pour annuler l'exécution, à savoir, avant que les délais d'attente sont déclenchées. Pour vous appelez soit annuler clearInterval ou clearTimeout comme ceci:

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

En outre, les délais d'attente sont automatiquement annulés lorsque vous quittez la page ou fermez la fenêtre du navigateur.

Answer 13

Eh bien, setTimeout est mieux dans une situation, comme je viens d'apprendre. Je l'utilise toujours setInterval, que je l'ai laissé courir en arrière-plan pendant plus d'une demi-heure. Quand je suis revenu à cet onglet, le diaporama (sur lequel a été utilisé le code) changeait très rapidement, au lieu de toutes les 5 secondes qu'il devrait avoir. Il ne fait en se reproduise plus que je teste plus et que ce soit ou non la faute du navigateur est pas important, car avec setTimeout cette situation est tout à fait impossible.

Answer 14

Vous pouvez valider réponse bobince par vous-même lorsque vous exécutez le code JavaScript suivant ou vérifier jsFiddle

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

Answer 15

La différence est évidente dans la console:

Answer 16

Il suffit d'ajouter sur ce qui a déjà été dit, mais la version setTimeout du code sera également atteindre le Maximum call stack size qui arrêtera de fonctionner. Comme il n'y a aucun cas de base pour la fonction récursive pour arrêter de vous ne pouvez donc pas le faire tourner pour toujours.

Answer 17

Je pense que SetInterval et SetTimeout sont différents. SetInterval exécute le bloc en fonction de la durée définie tandis que, SetTimeout exécute le bloc de code une fois.

Essayez ces ensemble de codes après les secondes du compte à rebours du délai d'attente:

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

et puis essayez

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

Vous pouvez voir les différences pour vous-même.