Question

我在这里有一个功能，它输出秒数作为天，分和秒，我希望它每秒运行一次，然后在delta中加一个 - 给出两个半精确的差异日期。

$(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'。

根据MDN，

setInterval：

重复调用函数或执行带有修复的代码片段每次通话之间的时间延迟。返回intervalID。

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

另一方面，

setInterval在调用回调后到期。回调将执行，并启动一个新的计时器，循环将继续。

＆＃13;

setTimeout

＆＃13;

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

＆＃13;

Answer 2

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

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

以下是我将其写出来的方式：

$(document).ready(function() {
    function Timer(delta) {
    	// Local variables
    	var delta, intervalId;

    	this.start = function(initialDelta) {
    		if (!intervalId) {
        		delta = initialDelta;
        		intervalId = window.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)
	                delta++;
        		})
    		}
    	}

    	this.stop = function() {
    		if (intervalId) {
    			window.clearInterval(intervalId);
    		}
    	}
    }

    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与每个Timer实例隔离（就像Java中类的私有变量一样）。通过这样做，您可以避免使用递归，并且使用setInterval的初始方法可以很好地实现此目的，因为每次调用函数时，它都可以访问和修改自己的本地delta。

这将允许您启动多个计时器，使用不同的delta值启动它们等。

创建一个函数setInterval / recursive

3 个答案: