2011-12-29 17 views
17

Voglio creare un timer che una volta raggiunto un certo punto, il timer si reimposta e ricomincia.javascript timer loop

In questo momento, ho impostato il ciclo e, come test, desidero ripristinarlo dopo 5000 ms (5 secondi). Ma il contatore va in tilt.

WIP Demo qui: http://jsfiddle.net/stursby/wUHA3/

+1

Prima clicco la demo, sarà in crash il mio browser? ': P' –

+0

Il contatore si azzera in Firefox ... –

+0

haha ​​no, non è un ciclo infinito. Sto aggiornando il testo di una span con il valore corrente del timer ... quindi è l'unica cosa che viene incasinata, vedrai. – stursby

risposta

43

Invece di setTimeout, è consigliabile utilizzare setInterval. Ripeterà automaticamente fino a cancellare l'intervallo.

setInterval(myMethod, 5000); 

function myMethod() 
{ 
    //this will repeat every 5 seconds 
    //you can reset counter here 
} 
+1

Sono d'accordo, solo per sottolineare il motivo per cui sta avendo il problema descritto è a causa della riga 'var diff = (new Date(). getTime() - start) - tempo; 'non è necessario per quella linea. Dovrebbe fare 'window.setTimeout (instance, 100);' invece di 'window.setTimeout (instance, (100 - diff));'. E il suo problema è risolto. – Chad

+0

Si potrebbe postare come risposta perché è altrettanto valido. L'OP può quindi decidere se quel metodo potrebbe essere adatto al loro programma generale. Mentre setInterval di solito ha senso in un caso come questo, il tuo codice risolve direttamente il problema. – keyboardP

+0

Buona idea, pubblicato. – Chad

5

Sono d'accordo con keyboardP che probabilmente si dovrebbe essere utilizzando setInterval invece di setTimeout. Tuttavia, per rispondere alla domanda originale, il motivo per cui si verificano problemi con il timer dipende dalla logica di ripetizione. Non usare:

var diff = (new Date().getTime() - start) - time; 
window.setTimeout(instance, (100 - diff)); 

Non è necessario cercare di conto per tempo di esecuzione (che presumo sia quello che stavi cercando di fare con diff). Basta assumere è trascurabile e l'uso:

setTimeout(instance, 100); 

E il problema viene risolto, come si può vedere in this jsFiddle.

+0

+1 (nessuna sorpresa: D) per il fissaggio del codice originale di OP. – keyboardP

+0

c'è un modo semplice per questo di incrementare di 1 anziché di 100? Ad esempio, 2,1 secondi sono 2100, c'è un modo per arrivare a più decimali come 2.154 secondi o 2154 sul timer? – stursby

+0

bene la precisione non sarà esatta al millisecondo. I browser valutano i timeout/intervalli in modo diverso. In media ogni 13ms viene valutato un timeout. SO è più specifico che puoi ottenere, a seconda del browser. – Chad