2

Было задание написать помощник измерения пульса. (Условия: на странице находится три елемента поле для сообщений, поле ввода 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>

2 ответа 2

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>

0
0

Спасибо всем тем, кто помог решить поставленную зажачу! Ну и благодаря своему ментору выяснил, что 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);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.