Machen Sie eine Funktion setInterval/rekursive

Question

Ich habe hier eine Funktion, die Sekunden als Tage, Minuten und Sekunden ausgibt, und ich möchte, dass es einmal pro Sekunde ausgeführt wird, und fügen Sie eins zum Delta hinzu - einen halb genauen Unterschied zu geben zwischen zwei Daten.

$(document).ready(function() { 
    if ($("#time").length) { 

     var delta = document.getElementById('time').innerHTML; 

     function timer(delta) { 
      setInterval(function() { 
       // calculate (and subtract) whole days 
       var days = Math.floor(delta/86400); 
       delta -= days * 86400; 
       // calculate (and subtract) whole hours 
       var hours = Math.floor(delta/3600) % 24; 
       delta -= hours * 3600; 
       // calculate (and subtract) whole minutes 
       var minutes = Math.floor(delta/60) % 60; 
       delta -= minutes * 60; 
       // what's left is seconds 
       var seconds = delta % 60; 
       // console.log(minutes); 
       console.log(days + " " + hours + " " + minutes + " " + seconds) 
       timer(delta + 1) 
      }, 1000); 
     } 
    } 
}); 

Was muss ich ändern, um dies zu erreichen? Ich habe eine gewisse Vertrautheit mit Rekursion - aber nicht viel, in aller Ehrlichkeit.

Answer 1

Ändern Sie 'setInterval' zu .

setInterval nach MDN:

ruft wiederholt eine Funktion oder führt einen Code-Schnipsel, mit einer festen Zeitverzögerung zwischen jedem Anruf. Gibt eine Intervall-ID zurück.

Was bedeutet, dass es die einmal pro 1000 ms ausgeführt wird, und rufen Sie die timer() Funktion, die eine andere setInterval spawnen. Sie werden nun auf 2 setInterval läuft, 4 nach 1000 ms, etc ...

setTimeout auf der anderen Seite abläuft, nachdem es den Rückruf aufruft. Der Rückruf wird ausgeführt und ein neuer Timer gestartet, und der Zyklus wird fortgesetzt.

var time = document.getElementById('time'); 
 

 
function timer(delta) { 
 
    setTimeout(function() { 
 
    // calculate (and subtract) whole days 
 
    var days = Math.floor(delta/86400); 
 
    delta -= days * 86400; 
 
    // calculate (and subtract) whole hours 
 
    var hours = Math.floor(delta/3600) % 24; 
 
    delta -= hours * 3600; 
 
    // calculate (and subtract) whole minutes 
 
    var minutes = Math.floor(delta/60) % 60; 
 
    delta -= minutes * 60; 
 
    // what's left is seconds 
 
    var seconds = delta % 60; 
 
    
 
    time.innerHTML = (days + " " + hours + " " + minutes + " " + seconds); 
 
    timer(delta + 1) 
 
    }, 1000); 
 
} 
 

 
timer(0);

<div id="time"></div>

Answer 2

können Sie weiterhin setInterval() verwenden, wenn Sie die äußere Variable delta innerhalb Ihrer timer() Funktion aktualisieren

var delta = document.getElementById('time').innerHTML; 
 

 
    function timer() { 
 
     // calculate (and subtract) whole days 
 
     var days = Math.floor(delta/86400); 
 
     delta -= days * 86400; 
 
     // calculate (and subtract) whole hours 
 
     var hours = Math.floor(delta/3600) % 24; 
 
     delta -= hours * 3600; 
 
     // calculate (and subtract) whole minutes 
 
     var minutes = Math.floor(delta/60) % 60; 
 
     delta -= minutes * 60; 
 
     // what's left is seconds 
 
     var seconds = delta % 60; 
 
     // console.log(minutes); 
 
     document.getElementById('result').innerHTML = days + " " + hours + " " + minutes + " " + seconds; 
 
     delta++; 
 
    } 
 

 
setInterval(timer, 1000);

<div id="time">0</div> 
 
<div id="result"></div>

Answer 3

Hier ist, wie ich es schreiben würde ou t:

$(document).ready(function() { 
 
    function Timer(delta) { 
 
    \t // Local variables 
 
    \t var delta, intervalId; 
 

 
    \t this.start = function(initialDelta) { 
 
    \t \t if (!intervalId) { 
 
     \t \t delta = initialDelta; 
 
     \t \t intervalId = window.setInterval(function() { 
 
\t     // calculate (and subtract) whole days 
 
\t     var days = Math.floor(delta/86400); 
 
\t     delta -= days * 86400; 
 
\t     // calculate (and subtract) whole hours 
 
\t     var hours = Math.floor(delta/3600) % 24; 
 
\t     delta -= hours * 3600; 
 
\t     // calculate (and subtract) whole minutes 
 
\t     var minutes = Math.floor(delta/60) % 60; 
 
\t     delta -= minutes * 60; 
 
\t     // what's left is seconds 
 
\t     var seconds = delta % 60; 
 
\t     // console.log(minutes); 
 
\t     console.log(days + " " + hours + " " + minutes + " " + seconds) 
 
\t     delta++; 
 
     \t \t }) 
 
    \t \t } 
 
    \t } 
 

 
    \t this.stop = function() { 
 
    \t \t if (intervalId) { 
 
    \t \t \t window.clearInterval(intervalId); 
 
    \t \t } 
 
    \t } 
 
    } 
 

 
    if ($("#time").length) { 
 
     var timer = new Timer(); 
 
     var delta = parseInt(document.getElementById('time').innerHTML); 
 
     timer.start(delta); 
 
     
 
     window.setTimeout(function() { timer.stop(); }, 5000); 
 
    } 
 
});

Schnell Erklärung: durch eine Konstruktorfunktion Timer verwenden, können Sie delta für jede Instanz von Timer (wie eine private Variable einer Klasse in Java) isolieren. Auf diese Weise vermeiden Sie, Rekursion zu verwenden, und Ihre ursprüngliche Methode, die setInterval verwendet, funktioniert perfekt für diesen Zweck, da jedes Mal, wenn die Funktion aufgerufen wird, auf ihre eigene lokale delta zugreifen und ändern kann.

Damit können Sie mehrere Timer starten, starten Sie sie mit verschiedenen Delta-Werte, etc ..