setTimeout o setInterval?

Question

Per quanto posso dire, questi due pezzi di javascript si comportano allo stesso modo:

Opzione A:

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

myTimeoutFunction();

Opzione B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

C'è qualche differenza tra l'utilizzo di setTimeout e setInterval?

Answer 1

Sono essenzialmente cercano di fare la stessa cosa, ma l'approccio setInterval saranno più accurate rispetto all'approccio setTimeout, dal momento che setTimeout attende 1000ms, esegue la funzione e quindi imposta un altro timeout. Così il periodo di attesa è in realtà un po 'più di 1000 ms (o molto di più, se la funzione richiede molto tempo per l'esecuzione).

Benche si potrebbe pensare che setInterval eseguirà esattamente ogni 1000 ms, è importante notare che setInterval sarà anche ritardare, dal momento che JavaScript non è un linguaggio multi-threaded, il che significa che - se non ci sono altre parti dello script in esecuzione -. l'intervallo dovrà aspettare per questo alla fine

questo Fiddle , si può chiaramente vedere che il timeout cadrà dietro, mentre l'intervallo è quasi tutto il tempo a quasi 1 chiamata / secondo (che lo script sta cercando di fare). Se si modifica la velocità variabile in alto a qualcosa di piccolo come 20 (il che significa che si tenta di eseguire 50 volte al secondo), l'intervallo non sarà mai abbastanza raggiungere una media di 50 iterazioni al secondo.

Il ritardo è quasi sempre trascurabile, ma se stai programmando qualcosa di veramente preciso, si dovrebbe andare per un di auto-regolazione del timer (che è essenzialmente un timer-based che si adatta costantemente il ritardo è stato creato)

Answer 2

  

C'è qualche differenza?

Sì. Un Timeout esegue un certo periodo di tempo dopo setTimeout () è chiamato; un intervallo esegue un certo periodo di tempo dopo l'intervallo precedente sparato.

Si noterà la differenza se la funzione doStuff () prende un po 'per l'esecuzione. Ad esempio, se rappresentiamo una chiamata a setTimeout / setInterval con ., una cottura del timeout / intervallo con * e l'esecuzione di codice JavaScript con [-----], i tempi sembrano:

Timeout:

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

Interval:

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

La prossima complicazione è che se un intervallo di incendi, mentre JavaScript è già occupato a fare qualcosa (come ad esempio la gestione di un intervallo di precedente). In questo caso, l'intervallo è ricordato, e avviene non appena le precedenti finiture conduttore e restituisce il controllo al browser. Così, ad esempio per un processo doStuff () che a volte è breve ([-]) e, a volte lunga ([-----]):

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

• rappresenta un intervallo di cottura che non poteva eseguire il suo codice subito, e si è fatto in attesa, invece.

Quindi intervalli cercano di ‘recuperare’ a tornare nei tempi previsti. Ma, non si fila uno sopra l'altro: non ci può essere solo un'esecuzione in attesa per intervallo. (Se tutti in coda, il browser sarebbe lasciato con un elenco in continua espansione di esecuzioni in circolazione!)

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

x rappresenta un intervallo di cottura che non poteva eseguire o essere fatto in attesa, così invece è stato scartato.

Se la vostra funzione doStuff () prende abitualmente più tempo per l'esecuzione superiore all'intervallo impostato per esso, il browser si mangia il 100% della CPU cercando di servizio, e può diventare meno reattivo.

  

Quale si usa e perché?

Chained-Timeout dà uno slot garantita di tempo libero per il browser; Intervallo cerca di assicurare la funzione è in esecuzione esegue il più vicino possibile ai suoi orari prestabiliti, a spese della disponibilità del browser UI.

Vorrei prendere in considerazione un intervallo per una tantum animazioni Volevo essere il più agevole possibile, mentre timeout concatenati sono più gentile per le animazioni in corso che avrebbero avuto luogo per tutto il tempo, mentre la pagina viene caricata. Per usi meno impegnativi (come ad esempio un programma di aggiornamento banale cottura ogni 30 secondi o qualcosa del genere), si può tranquillamente utilizzare sia.

In termini di compatibilità del browser, setTimeout precede setInterval, ma tutti i browser si incontreranno oggi supporta entrambi. L'ultimo ritardatario per molti anni è stato IE Mobile di WinMo <6.5, ma si spera anche questo è ormai alle spalle.

Answer 3

setInterval()

setInterval() è un intervallo di tempo in base all'esecuzione di codice in un metodo che ha la capacità nativa di eseguire ripetutamente un script specificato quando l'intervallo è raggiunto.Dovrebbe non essere annidati nella sua funzione di richiamata dall'autore dello script per renderlo ciclo, dal momento che passanti per impostazione predefinita.Si si continua a sparare all'intervallo a meno che la chiamata clearInterval().

Se volete il codice del ciclo per le animazioni o su un clock tick, quindi utilizzare setInterval().

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

setTimeout()

setTimeout() è un tempo in base all'esecuzione di codice in un metodo che prevede l'esecuzione di uno script solo una volta quando l'intervallo è raggiunto.Sarà non ripetere di nuovo a meno che non si marcia il ciclo lo script annidando setTimeout() oggetto all'interno della funzione si chiama per l'esecuzione.Se orientata al ciclo, si continua a sparare all'intervallo a meno che la chiamata clearTimeout().

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

Se vuoi che qualcosa accada una volta, dopo un periodo di tempo specificato, quindi utilizzare setTimeout().Che è perché si esegue solo una volta, quando l'intervallo di tempo indicato è raggiunto.

Answer 4

Il setInterval rende più facile per annullare futura esecuzione del codice. Se si utilizza setTimeout, è necessario tenere traccia dell'ID del timer nel caso in cui si desidera annullare in un secondo momento.

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

myTimeoutFunction();

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

vs

function myTimeoutFunction()
{
    doStuff();
}

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

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

Answer 5

Trovo il metodo setTimeout più facile da usare se si desidera annullare il timeout:

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

myTimeoutFunction();

Inoltre, se qualcosa sarebbe andato storto nella funzione sarà solo smettere di ripetere al primo errore di tempo, invece di ripetere l'errore ogni secondo.

Answer 6

La stessa differenza è nelle loro scopi.

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

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

E 'così semplice come sembra

dettagli più elaborati qui http://javascript.info/tutorial/settimeout-setinterval

Answer 7

Quando si esegue una qualche funzione all'interno setInterval, che funziona più tempo di quanto timeout-> sarà bloccato il browser.

- ad esempio doStuff () prende 1.500 sec. per essere eseguite e che fate: setInterval (doStuff, 1000);
1) corsa Browser doStuff () che prende 1,5 sec. essere giustiziato; Pagina 2) Dopo circa 1 secondo si cerca di eseguire doStuff () . Ma precedente doStuff () è ancora executed-> in modo del browser aggiunge questa corsa alla coda (a correre dopo la prima è fatto).
3,4, ..) Lo stesso aggiunge alla coda di esecuzione per i prossimi iterazioni, ma doStuff () dal precedente sono ancora in corso ...
Come il risultato-browser è bloccato.

Per evitare questo comportamento, il modo migliore è quello di eseguire setTimeout all'interno setTimeout per emulare setInterval .
Per correggere i timeout tra setTimeout chiama, è possibile utilizzare auto-correzione alternativa alla tecnica setInterval di JavaScript.

Answer 8

Io uso setTimeout.

A quanto pare la differenza è setTimeout chiama il metodo una volta, setInterval chiama repeatdly.

Ecco un buon articolo che spiega la differenza: Tutorial: timer JavaScript con setTimeout e setInterval

Answer 9

Ho fatto semplice test di setInterval(func, milisec), perché ero curioso cosa accade quando consumo di tempo funzione è maggiore durata dell'intervallo.

setInterval sarà in generale programma iterazione successiva subito dopo il inizio dell'iterazione precedente, a meno che la funzione è ancora in corso . Se è così, setInterval aspetterà, fino alla funzione termina. Non appena accade, la funzione è immediatamente puntato ancora - non c'è attesa per la prossima iterazione secondo il programma (come sarebbe in condizioni senza funzione time superato). Non c'è inoltre situazione con iterazioni parallele in esecuzione.

Ho provato questo su Chrome V23. Spero che sia deterministica implementazione in tutti i browser moderni.

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

uscita della console:

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

La funzione wait è solo un filo di blocco helper - chiamata ajax sincrona che prende esattamente 2500 millisecondi di elaborazione sul lato server:

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

Answer 10

Il tuo codice avrà diverse intevals esecuzione, e in alcuni progetti, come i giochi online non è accettabile. In primo luogo, ciò che si dovrebbe fare, per rendere il lavoro del codice con gli stessi intevals, si dovrebbe cambiare "myTimeoutFunction" a questa:

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

Dopo questa modifica, sarà uguale a

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

Ma, si dovrà ancora non avete risultato stabile, perché JS è single-threaded. Per ora, se filo JS sarà impegnato con qualcosa, non sarà in grado di eseguire la funzione di callback, e l'esecuzione sarà rinviata per 2-3 msec. È che hai 60 esecuzioni al secondo, e ogni volta che si dispone casuale ritardo 1-3 secondi, sarà assolutamente non accettabile (dopo un minuto sarà intorno a 7200 ritardo msec), e posso consigliare di usare qualcosa di simile a questo:

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

Questo codice garantirà periodo di esecuzione stabile. Anche discussione sarà occupato, e il codice verrà eseguito dopo 1005 msecondi, la prossima volta avrà timeout per 995 msec, e il risultato sarà stabile.

Answer 11

Per vedere le cose un po 'diversamente: setInterval assicura che il codice viene eseguito ad ogni determinato intervallo (vale a dire 1000 ms, o quanto specificato) mentre setTimeout imposta il tempo che 'attende fino a quando' viene eseguito il codice. E poiché ci vuole millisecondi in più per eseguire il codice, si aggiunge fino a 1000 ms e, quindi, setTimeout corre di nuovo, a volte inesatte (oltre 1000 ms).

Per esempio, i timer / countdown non sono fatti con setTimeout, sono fatti con setInterval, per assicurarsi che non ritardi e il codice funziona alla esatto dato intervallo.

Answer 12

Sia setInterval e setTimeout restituire un id timer che è possibile utilizzare per annullare l'esecuzione, vale a dire, prima che i timeout sono attivati. Per annullare si chiama sia clearInterval o clearTimeout in questo modo:

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

Inoltre, i timeout vengono cancellati automaticamente quando si esce dalla pagina o chiudere la finestra del browser.

Answer 13

Bene, setTimeout è meglio in una situazione, come ho appena appreso. Io uso sempre setInterval, che ho lasciato per l'esecuzione in background per più di mezz'ora. Quando sono passato indietro a quella scheda, la presentazione (su cui è stato usato il codice) stava cambiando molto rapidamente, anziché ogni 5 secondi che dovrebbe avere. E in effetti accada di nuovo, come i test più e se è colpa del browser o meno non è importante, perché con setTimeout questa situazione è del tutto impossibile.

Answer 14

È possibile convalidare risposta bobince da soli quando si esegue le seguenti javascript o controllare questo 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 differenza è evidente nella console:

Answer 16

Basta aggiungere su ciò che è già stato detto, ma la versione setTimeout del codice sarà anche raggiungere il Maximum call stack size che interromperne il funzionamento. Dal momento che non v'è alcun caso base per la funzione ricorsiva per fermarsi a cui non è possibile fare eseguire per sempre.

Answer 17

Credo SetInterval e SetTimeout sono diversi. SetInterval esegue il blocco secondo il tempo impostato, mentre, SetTimeout esegue il blocco di codice, una volta.

Prova queste serie di codici, dopo i secondi di attesa del conto alla rovescia:

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

e quindi provare

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

È possibile vedere le differenze di persona.