Question

我想知道这里的for循环有什么问题。我正在尝试制作Pomodoro学习计时器，一种学习技巧，建议您将学习分解为25分钟的块，然后再进行3-5分钟的休息。在这里，我有2个依次运行的计时器，一个接一个。当第一个计时器达到零时，第二个计时器开始计时。现在，我将计时器分别设置为5秒和3秒，以加快测试速度。一切正常，直到我将整个内容放入一个for循环中，然后再带来一些意外的行为。我想基于用户输入来循环整个功能，这将使代码知道循环计数器多少次（这尚未设置）。通过按html页面上的按钮来启动计时器。该按钮在底部执行pomo（）函数，其中包含一个循环，该循环应循环start（）函数。 PS，我是一个超级新手，如果这只是糟糕的代码，我深表歉意，对此我真的很陌生：）

var time25 = 5;
var time5 = 3;
var timeElapsed25 = 0;
var timeElapsed5 = 0; // initializes time elapsed to zero
var time = document.getElementsByClassName("header"); //links to html
time[0].innerHTML = time25; // sets output to html

function convertToMin(s) {

  mins = Math.floor(s / 60);
  let minsStr = mins.toString();
  if (minsStr.length === 1) {
    mins = '0' + mins;
  }
  sec = s % 60;
  let secStr = sec.toString();
  if (secStr.length === 1) {
    sec = '0' + sec;
  }
  return mins + ':' + sec;
}

function start() {
  var timer25 = setInterval(counter25, 1000);
  console.log("timer1");

  function counter25() {
    timeElapsed25++
    time[0].innerHTML = convertToMin(time25 - timeElapsed25);

    if (timeElapsed25 === time25) {
      console.log("timer2")
      clearInterval(timer25);
      timeElapsed25 = 0;

      var timer5 = setInterval(counter5, 1000);

      function counter5() { //Counter For 5 minute break
        timeElapsed5++;

        time[0].innerHTML = convertToMin(time5 - timeElapsed5);
        if (timeElapsed5 === time5) {
          clearInterval(timer5);
          timeElapsed5 = 0;
        }
      }
    }
  }
}

function pomo() {
  for (j = 0; j < 3; j++) {
    start();
  }
}

Answer 1

您不应循环调用start()。 setInterval()无需等待倒计时完成，它会立即返回，因此您要同时启动所有3个计时器。

您应该做的是在两个计时器都完成后再次调用start()。要限制重复次数，请使用count参数，并在每次再次调用时将其递减。

var time25 = 5;
var time5 = 3;
var timeElapsed25 = 0;
var timeElapsed5 = 0; // initializes time elapsed to zero
var time = document.getElementsByClassName("header"); //links to html
time[0].innerHTML = time25; // sets output to html

function pomo() {
  start(3);
}

function start(count) {
  if (count == 0) { // reached the limit
    return;
  }
  var timer25 = setInterval(counter25, 1000);
  console.log("timer1");

  function counter25() {
    timeElapsed25++
    time[0].innerHTML = convertToMin(time25 - timeElapsed25);

    if (timeElapsed25 === time25) {
      console.log("timer2")
      clearInterval(timer25);
      timeElapsed25 = 0;

      var timer5 = setInterval(counter5, 1000);

      function counter5() { //Counter For 5 minute break
        timeElapsed5++;

        time[0].innerHTML = convertToMin(time5 - timeElapsed5);
        if (timeElapsed5 === time5) {
          clearInterval(timer5);
          timeElapsed5 = 0;
          start(count - 1); // Start the next full iteration

        }
      }
    }
  }
}

function convertToMin(s) {

  mins = Math.floor(s / 60);
  let minsStr = mins.toString();
  if (minsStr.length === 1) {
    mins = '0' + mins;
  }
  sec = s % 60;
  let secStr = sec.toString();
  if (secStr.length === 1) {
    sec = '0' + sec;
  }
  return mins + ':' + sec;
}

循环执行功能，出现异常行为

1 个答案: