在第一个计时器完成后实施第二个计时器的倒计时

时间:2017-01-18 06:56:13

标签: javascript timer

我是一名初学者,正在尝试创建番茄钟时钟项目并希望在会话倒计时完成后触发中断倒计时。就像在图片上一样。

enter image description here

定时器是通过输入字段设置的,并且根据构思中断定时器应该倒计时设置值,实际上它会减少会话的值。

Javascript代码

function sessionTimer(seconds) {
  clearInterval(countdown);
  const t = new Date();
  const end = t.getTime() + seconds * 1000;
  displayTimerLeftSession(seconds);
  console.log({
    t,
    end
  });

  countdown = setInterval(() => {
    if (!isPaused) {
      const remainSeconds = Math.round((end - t.getTime()) / 1000);
      if (remainSeconds < 0) {
        clearInterval(countdown);
        breakTimer(seconds);
        return;
      }
      displayTimerLeftSession(remainSeconds);
      t.setSeconds(t.getSeconds() + 1);
    }
  }, 1000);
  t.setSeconds(t.getSeconds() + 1) - 1;
}

我知道这是什么问题。因为我在 sessionTimer 函数中调用了 breakTimer ,但是我不知道如何在会话之后进行中断计时器倒计时。我的代码很草率,无论如何都需要重构。请不要严厉地评判我。如果您想查看代码,请参阅the Project

2 个答案:

答案 0 :(得分:1)

希望我能正确地解释你的问题。您可以做的一件事是在计时器完成后触发回调。经过n秒后,您清除间隔并触发回调,表示计时器已完成。

&#13;
&#13;
function timer(seconds, callback) {
  var countDown = function() {
    console.log(seconds);
    if (seconds-- == 0) {
      clearInterval(time);
      callback()
    }
  };
  
  countDown();
  var time = setInterval(countDown, 1000);
}

console.log('Starting session timer...');
timer(5, function() {
  console.log('Session timer complete. Starting break timer...');
  timer(5, function() {
    console.log('Break timer complete.');
  });
});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我创建了breakSeconds全局变量并在提交

的函数中更新它
document.customFormBreak.addEventListener('submit', function(e) {
  e.preventDefault();
  breakSeconds = this.minutesBreak.value * 60;
  displayTimerLeftBreak(breakSeconds);
  this.reset();
});

如果您想查看代码,请继续project