Цикл функции, неожиданное поведение

Question

Мне интересно, что здесь не так с циклом for.Я пытаюсь сделать Pomodoro Study Timer, технику обучения, которая предполагает, что вы разбиваете обучение на 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;
}