做一個函數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。

這將允許您啓動多個定時器，以不同的增量值啓動它們等。