带增量的倒计时计时器答案

【问题标题】：Count down timer with increment带增量的倒计时计时器
【发布时间】：2020-07-11 20:15:14
【问题描述】：

我有一个开关和一个计时器。开关只是在 0 和 1 之间更改值，计时器是每 5 秒间隔一次。当达到间隔时，开关值发生变化（如果它是 0 现在它是 1，如果它是 1 现在它是 0）并且我还有一个按钮可以强制改变开关值并重置计时器。

我还有另一个计时器，它以 5 毫秒的间隔运行，它只是显示在 5 秒的间隔上还剩下多少时间。

现在这就是我卡住的地方。我有一个按钮，应该将该时间增加两秒。因此，如果自上次切换以来已经过去了 3 秒，并且我点击了增量，那么现在距离下一次切换还有 6 秒...... 这部分让我很困惑我应该如何去做。

这是我的 html 和 javascript 代码

window.addEventListener('DOMContentLoaded', (event) => {
    let timer = document.getElementById("timer");
    let switchvalue = document.getElementById("switchvalue");
    let force = document.getElementById("force");
    let increment = document.getElementById("increment");
    let boolvalue = false;
    let maxtime = 5000;
    var tick = Date.now();
    var switchinterval = setInterval(timecounter,maxtime);

    function update(){
        tick = Date.now();
        boolvalue = !boolvalue;
        switchvalue.textContent = boolvalue;
        
        clearInterval(switchinterval);
        switchinterval = setInterval(timecounter,maxtime);

    }

    function timecounter(){
        update();
    }

    let displayinterval = setInterval(() => {
        let now = Date.now();
        let elapsed = now-tick;
        timer.textContent = maxtime-elapsed;
    }, 5);
    force.addEventListener("click",e=>{
        update();
    });

increment.addEventListener("click",e=>{
    //What do I do here?
});
});

<html>
    <head>
        <script src="timer.js"></script>
    </head>
    <body>
        <div id="timer">10</div>
        <div id="switchvalue">false</div>
        <button id="force">Switch</button>
        <button id="increment">Increment</button>
    </body>
</html>

我不确定如何使增量按钮功能。这似乎是一个足够简单的问题来解决..但我的大脑不工作

【问题讨论】：

计算新的展示时间：maxtime - elapsedTime + increment.
我试过了，好像没用..
您还必须为间隔条件设置一个新的总计 (tick)，并开始一个新的间隔。
是的，我按照您所说的更新了原始帖子，但它似乎不起作用

标签： javascript html timer

【解决方案1】：

如果我正确理解了你的问题，你的增量按钮应该只是增加两秒，对吧？

increment.onclick =e=>
  {
  tick += 2000  // add 2s
  }

const timer       = document.getElementById("timer") 
  ,   switchvalue = document.getElementById("switchvalue")
  ,   force       = document.getElementById("force")
  ,   increment   = document.getElementById("increment")
  ;
let boolvalue = false
  , maxtime   = 5000
  , tick      = Date.now()
  , switchinterval
  , displayinterval
  ;
switchinterval = setInterval(timecounter, maxtime)
  ;
function update() 
  {
  tick = Date.now()
  boolvalue = !boolvalue
  switchvalue.textContent = boolvalue
  clearInterval(switchinterval)
  switchinterval = setInterval(timecounter, maxtime)
  }
function timecounter()
  {
  update()
  }
displayinterval = setInterval(_=>
  {
  let now     = Date.now()
    , elapsed = now - tick 
  timer.textContent = maxtime - elapsed
  }, 5)

force.onclick =e=>
  {
  update()
  }
increment.onclick =e=>
  {
  tick += 2000  // add 2s
  }

<div id="timer">?</div>
<div id="switchvalue">false</div>
<button id="force">Switch</button>
<button id="increment">Increment</button>

但是您忘记考虑到 setInterval 中指示的延迟是不可靠的，它只是根据系统可用性表示的假设延迟，通常（总是）延迟。

如果你想有一个可靠的延迟，你必须使用系统时钟的值来检查经过的延迟。

这正是你练习的案例研究，它的优点是只使用一个setInterval 来做所有事情：

const timer       = document.getElementById("timer") 
  ,   switchvalue = document.getElementById("switchvalue")
  ,   force       = document.getElementById("force")
  ,   increment   = document.getElementById("increment")
  ;
let boolvalue  = false
  , maxtime    = 5000
  , timeTarget = Date.now() + maxtime
  , interval_5ms
  ;
const timeSwich =_=>
  {
  switchvalue.textContent = boolvalue = !boolvalue
  timeTarget = Date.now() + maxtime    
  }
interval_5ms = setInterval(_=>
  {
  let tim = timeTarget - Date.now()
  if ( tim<=0 )
    {
    timeSwich()
    tim = maxtime
    }
  timer.textContent = tim
  }, 5)

force.onclick = timeSwich

increment.onclick =_=>
  {
  timeTarget = Math.min((timeTarget +2000), Date.now() + maxtime)
  // timeTarget += 2000  // add 2s
  }

<div id="timer">?</div>
<div id="switchvalue">false</div>
<button id="force">Switch</button>
<button id="increment">Increment</button>

【讨论】：

如果我想将增量限制在 5000 以使其不超过其最大数量？
@Nina 只是timeTarget = Math.min((timeTarget +2000), Date.now() + maxtime) - （我改变了我的答案）