如何从 setInterval() 函数中获取剩余时间

Question

我有以下代码

function startTimer(time) {
  var countDown = 0;
  var time1 = time * 60;
  x = setInterval(function() {
    time2 = time1--;
    if (time2 > 0) {
      document.getElementById("displayTime").innerHTML = time2;
    } else if (time2 == 0) {
      clearInterval(x);
    }
  }, 1000);
}
startTimer(30)

<span id=displayTime></span>

我该如何获得这段代码中的剩余时间并将其用于暂停/恢复目的。（我计划将该值应用到函数中）。

我尝试创建了两个按钮来实现暂停和恢复，但它们不起作用。

 $("#start").on("click",function(){
   if (time2 < setTime){
     startTimer(time2);
   }
   else{
     startTimer(setTime);
   }

   });
   $("#stop").on("click",function(){
     clearInterval(x);
    })
    });

- user8840209

---

你遇到了什么问题？ - john Smith

我想从那个函数中获取剩余时间。 - user8840209

如果你移除 time1 = time * 60 并且改为 time1 = time，那么它对我来说就像预期的一样工作。 - john Smith

这里没有超时限制，你有一个setInterval，它会每1000毫秒执行一次函数，因为你设置了这个参数。在其中，你有一个逻辑，当time2变量为0时终止它...所以如果你需要在clearInternal被调用时访问变量time2，那么它应该有一个值。 - sumeet kumar

Answer 1

我将time2从函数中取出，并使x在函数外可用。我们可以使用它来启动/恢复计时器。

var time2;
var timer;
function startTimer(time) {
  var countDown = 0;
  var time1 = time * 60;
  x = setInterval(function() {
    time2 = time1--;
    if (time2 > 0) {
      document.getElementById("displayTime").innerHTML = time2;
    } else if (time2 == 0) {
      clearInterval(x);
    }
  }, 1000);
  return x;
}

function pauseTimer() {
  clearInterval(timer);
}
function resumeTimer() {
  time = time2/60 || 30;
  timer = startTimer(time);
}

<span id=displayTime></span>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resumeTimer()">Start/Resume</button>

- Sagar

Answer 2

这个程序使用输入框来设置开始时间，如果您不希望用户更改值，则可能希望将输入设置为readonly。

var timerInterval = null;

function startTimer(time) {
  // Update input every second
  return setInterval(function() {
    document.getElementById("displayTime").value = --time;
    if (time < 1) {
      pause();
    }
  }, 1000);
}

function start() {
  // Get the current time to begin from
  var timeToStartFrom = document.getElementById("displayTime").value;
  timerInterval = startTimer(timeToStartFrom);
}

function pause() {
  // Clear the interval to stop the timer
  clearInterval(timerInterval);
}

<input id=displayTime value=30 />
<button onclick="pause()">Pause</button>
<button onclick="start()">Start</button>

最后，要记住这不是一个精确的计时器。如果用户点击暂停按钮，计时器将增加上一个完整秒钟和该秒钟的经过时间之间的差值。（例如：在剩余28.1秒时暂停，计时器仍将显示29秒，重新启动会从29秒开始。这有效地为计时器添加了0.9秒。）

有许多基于准确计时的库，我建议查找这些库来使用超过基本示例的更高级应用。

- Phillip Thomas