Сброс таймера после срабатывания всех счетчиков JS?

31 января 2022, 07:20

Было задание написать помощник измерения пульса. (Условия: на странице находится три елемента поле для сообщений, поле ввода input + кнопка ввода, кнопка. пользователь нажимает кнопку в поле для сообщения появляется информация: "Измерение начнется через 5,4,3,...(таймер)" Измерение... после этого идет отсчет 15 секунд затем пользователь должен ввести количество ударов в сообщении должен появиться результат userInput * 4)

Написал. И вроде бы все норм, но повторно счетчики не запускаются?! Не могу понять что и как сделать для правильного перезапуска таймеров!

const message = document.getElementById('message'); 
const pulse = document.getElementById('number'); 
const startBtn = document.getElementById('start'); 
const resultBtn = document.getElementById('result'); 
 
const dataForTimer = { 
    message1: 'Измерение начнется через', 
    message2: 'Измерение...', 
    timer1: 5, 
    timer2: 15, 
}; 
 
function Timer(element, textMessage, number, timer) { 
    const elem = element; 
    let count = number; 
    let text = textMessage; 
    let intervalId = null; 
 
    this.showMessage = function () { 
        intervalId = setInterval(() => { 
            if (count <= 0) { 
                clearInterval(intervalId); 
            } 
            console.log(intervalId); 
            elem.innerHTML = ` ${text} ${count}`; 
            count -= 1; 
        }, 1000); 
 
    }; 
 
    this.showNextMessage = function () { 
        setTimeout(() => { 
            this.showMessage(); 
        }, timer); 
    }; 
} 
 
const timer1 = new Timer(message, dataForTimer.message1, dataForTimer.timer1); 
const timer2 = new Timer(message, dataForTimer.message2, dataForTimer.timer2, '6000'); 
 
function showResult() { 
    message.innerHTML = ''; 
    message.innerHTML = ` Ваш пульс ${+pulse.value * 4} ударов в минуту`; 
} 
 
startBtn.addEventListener('click', () => { 
    pulse.value = ''; 
    timer1.showMessage(); 
    timer2.showNextMessage(); 
}); 
 
resultBtn.addEventListener('click', showResult);

<p id="message"></p> 
    <button id="start">START</button> 
    <input type="text" name="number" id="number" value=""> 
    <button id="result">RESULT</button>

Answer 1

Необходимо перенести и заменить:

const timer1 = new Timer(message, dataForTimer.message1, dataForTimer.timer1);
const timer2 = new Timer(message, dataForTimer.message2, dataForTimer.timer2, '6000');

В функцию:

   startBtn.addEventListener('click', () => {
        const timer1 = new Timer(message, dataForTimer.message1, dataForTimer.timer1, '0');
        const timer2 = new Timer(message, dataForTimer.message2, dataForTimer.timer2, '6000');
        pulse.value = '';
        timer1.showMessage();
        timer2.showNextMessage();
    });

Пример:

const message = document.getElementById('message'); 
const pulse = document.getElementById('number'); 
const startBtn = document.getElementById('start'); 
const resultBtn = document.getElementById('result'); 
 
const dataForTimer = { 
    message1: 'Измерение начнется через', 
    message2: 'Измерение...', 
    timer1: 5, 
    timer2: 15, 
}; 
 
function Timer(element, textMessage, number, timer) { 
    const elem = element; 
    let count = number; 
    let text = textMessage; 
    let intervalId = null; 
 
    this.showMessage = function () { 
        intervalId = setInterval(() => { 
            if (count <= 0) { 
                clearInterval(intervalId); 
            } 
            console.log(intervalId); 
            elem.innerHTML = ` ${text} ${count}`; 
            count -= 1; 
        }, 1000); 
 
    }; 
 
    this.showNextMessage = function () { 
        setTimeout(() => { 
            this.showMessage(); 
        }, timer); 
    }; 
} 
function showResult() { 
    message.innerHTML = ''; 
    message.innerHTML = ` Ваш пульс ${+pulse.value * 4} ударов в минуту`; 
} 
 
startBtn.addEventListener('click', () => { 
    const timer1 = new Timer(message, dataForTimer.message1, dataForTimer.timer1, '0'); 
    const timer2 = new Timer(message, dataForTimer.message2, dataForTimer.timer2, '6000'); 
    pulse.value = ''; 
    timer1.showMessage(); 
    timer2.showNextMessage(); 
}); 
 
resultBtn.addEventListener('click', showResult);

<p id="message"></p> 
    <button id="start">START</button> 
    <input type="text" name="number" id="number" value=""> 
    <button id="result">RESULT</button>

Answer 2

Спасибо всем тем, кто помог решить поставленную зажачу! Ну и благодаря своему ментору выяснил, что JS действительно многограныйн и классный язык! Решений было несколько, но в итоге получился данный вариант.

const message = document.getElementById('message'); 
const pulse = document.getElementById('number'); 
const startBtn = document.getElementById('start'); 
const resultBtn = document.getElementById('result'); 
 
const dataForTimer = { 
  message1: 'Измерение начнется через', 
  message2: 'Измерение...', 
  timer1: 5, 
  timer2: 15, 
}; 
 
// eslint-disable-next-line no-shadow 
function Timer2(element, textMessage, number, runTimer) { 
  const elem = element; 
  let count = number; 
  const text = textMessage; 
  let intervalId = null; 
 
  this.showMessage = () => { 
    intervalId = setInterval(() => { 
      if (count <= 0) { 
        clearInterval(intervalId); 
        if (runTimer) { 
          runTimer(); 
        } 
      } 
      elem.innerHTML = ` ${text} ${count}`; 
      count -= 1; 
    }, 1000); 
  }; 
} 
 
function showResult() { 
  message.innerHTML = ''; 
  message.innerHTML = ` Ваш пульс ${+pulse.value * 4} ударов в минуту`; 
} 
 
function nextTimer() { 
  const timer = new Timer2(message, dataForTimer.message2, dataForTimer.timer2); 
  timer.showMessage(); 
} 
 
startBtn.addEventListener('click', () => { 
  const timer1 = new Timer2(message, dataForTimer.message1, dataForTimer.timer1, nextTimer); 
  pulse.value = ''; 
  timer1.showMessage(); 
}); 
 
resultBtn.addEventListener('click', showResult);