做一个函数setInterval /递归的

Question

我有一个函数在这里输出秒作为天，分和秒，我希望它运行一次，并增加一个三角洲 - 给出一个准确的差异在两个日期之间。

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

我需要改变以达到这个目标？我对递归有一些熟悉 - 但不是很多，诚实。

Answer 1

变化'setInterval'变为'setTimeout'。

setInterval根据MDN：

反复调用的函数或执行的代码段，其中每个呼叫之间的固定 时间延迟。返回一个intervalID。

这意味着它将运行每1000毫秒一次，并调用timer()函数，将产生另一个setInterval。现在你必须运行2个setInterval，1000ms后4个等...

setTimeout另一方面在它调用回调后过期。回调将执行，并启动一个新的计时器，循环将继续。

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

您可以继续使用setInterval()如果您timer()函数中更新外部变量delta

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

这是我会怎么写呢鸥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); 
 
    } 
 
});

快速的解释：通过使用构造函数Timer，您可以隔离delta至定时器的每个实例（如类的在Java中的私有变量）。通过这样做，您可以避免使用递归，并且使用setInterval的初始方法可以很好地满足此目的，因为每次调用该函数时都可以访问和修改自己的本地delta。

这将允许您启动多个定时器，以不同的增量值启动它们等。