1

У меня есть счётчик, в который я сам лично вношу данные (Часы, минуты и секунды) Я реализовал почти всё. Но у меня проблема у меня счётчик иногда сбрасывает по 2 секунды сразу. Буду очень благодарен если поможете!

let hoursVal = $('input[name="hours"]').val();
let OrigHours = hoursVal;
let minutsVal = $('input[name="minuts"]').val();
let OrigMinuts = minutsVal;
let secondVal = $('input[name="second"]').val();
let OrigSecond = secondVal;
let pause = false;
let timer = null;

$('.pause').click(function() {
  pause = !pause;
  if (pause) {
    $(this).text('Старт').addClass('start').removeClass('pause');
  } else {
    $(this).text('Пауза').addClass('pause').removeClass('start');
  }
});

$('.restart').click(function() {
  $("#hours").text(OrigHours);
  $("#minutes").text(OrigMinuts);
  $("#seconds").text(OrigSecond);
  $('.start').removeClass('no-active');
});

$('input[type="submit"]').click(function() {
  if (timer) {
    return;
  }

  $('.second-figure').addClass('no-active');

});

$('.start').click(function() {
  $(this).addClass('no-active');

  compareDate = new Date();

  compareDate.setHours(compareDate.getHours() + parseInt(hoursVal));
  compareDate.setMinutes(compareDate.getMinutes() + parseInt(minutsVal));
  compareDate.setSeconds(compareDate.getSeconds() + parseInt(secondVal));

  timer = setInterval(timeBetweenDates, 1000, compareDate);

  function timeBetweenDates(toDate) {
    if (pause) {
      toDate.setSeconds(toDate.getSeconds() + 1);
      return;
    }

    let
      now = new Date(),
      difference = toDate.getTime() - now.getTime();

    if (difference <= 0) {
      clearInterval(timer);
      timer = 0;
    } else {
      let
        seconds = Math.floor(difference / 1000),
        minutes = Math.floor(seconds / 60),
        hours = Math.floor(minutes / 60);

      minutes %= 60;
      seconds %= 60;

      $("#hours").text(hours);
      $("#minutes").text(minutes);
      $("#seconds").text(seconds);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <figure class="fisrt-figure">
    <h1>Таймер</h1>
    <div class="timer-menu">
      <h2>До конца задания осталось:</h2>
      <div class="timer-info">
        <span id="hours">00</span>
        <a>:</a>
        <span id="minutes">00</span>
        <a>:</a>
        <span id="seconds">00</span>
      </div>
    </div>
    <div class="timer-control">
      <button class="start">Старт</button>
      <button class="pause">Пауза</button>
      <button class="restart">Перезапуск</button>
    </div>
  </figure>
  <figure class="second-figure">
    <h2>Введите данные</h2>
    <div class="set-data">
      <label>Введите количество часов</label>
      <input type="text" name="hours" value="3" placeholder="Введите количество часов">
      <label>Введите количество минут</label>
      <input type="text" name="minuts" value="00" placeholder="Введите количество минут">
      <label>Введите количество секунд</label>
      <input type="text" name="second" value="00" placeholder="Введите количество секунд">
      <input type="submit" value="Продолжить">
    </div>
  </figure>
</main>

2
  • Не иногда, а когда при запущенном тайме нажимаешь старт. Чтобы этого не происходило или обнуляй setInterval или просто при запущеном таймере сделай кнопку старт неактивной... Хотя первый вариант будет грамотней
    – Air
    26 фев 2019 в 22:24
  • Так я старт один раз жму. Потом у меня появляется кнопка паузы вместо старта 26 фев 2019 в 22:26

1 ответ 1

1

Дело в том, что Ваш секундный таймер - неточный и иногда вызывается до того, как полностью пройдет очередная секунда. Принципиальное решение с requestAnimationFrame (надо изменить подсчет времени в паузе и остановку таймера):

let hoursVal = $('input[name="hours"]').val();
let OrigHours = hoursVal;
let minutsVal = $('input[name="minuts"]').val();
let OrigMinuts = minutsVal;
let secondVal = $('input[name="second"]').val();
let OrigSecond = secondVal;
let pause = false;
let timer = null;

$('.pause').click(function() {
  pause = !pause;
  if (pause) {
    $(this).text('Старт').addClass('start').removeClass('pause');
  } else {
    $(this).text('Пауза').addClass('pause').removeClass('start');
  }
});

$('.restart').click(function() {
  $("#hours").text(OrigHours);
  $("#minutes").text(OrigMinuts);
  $("#seconds").text(OrigSecond);
  $('.start').removeClass('no-active');
});

$('input[type="submit"]').click(function() {
  if (timer) {
    return;
  }

  $('.second-figure').addClass('no-active');

});

$('.start').click(function() {
  $(this).addClass('no-active');

  compareDate = new Date();

  compareDate.setHours(compareDate.getHours() + parseInt(hoursVal));
  compareDate.setMinutes(compareDate.getMinutes() + parseInt(minutsVal));
  compareDate.setSeconds(compareDate.getSeconds() + parseInt(secondVal));

  //timer = setInterval(timeBetweenDates, 1000, compareDate);
  toDate = compareDate;
  requestAnimationFrame(timeBetweenDates);
  function timeBetweenDates() {
    if (pause) {
      toDate.setSeconds(toDate.getSeconds() + 1);
      return;
    }

    let
      now = new Date(),
      difference = toDate.getTime() - now.getTime();

    if (difference <= 0) {
      clearInterval(timer);
      timer = 0;
    } else {
      let
        seconds = Math.floor(difference / 1000),
        minutes = Math.floor(seconds / 60),
        hours = Math.floor(minutes / 60);

      minutes %= 60;
      seconds %= 60;

      $("#hours").text(hours);
      $("#minutes").text(minutes);
      $("#seconds").text(seconds);
    }
    
    requestAnimationFrame(timeBetweenDates);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <figure class="fisrt-figure">
    <h1>Таймер</h1>
    <div class="timer-menu">
      <h2>До конца задания осталось:</h2>
      <div class="timer-info">
        <span id="hours">00</span>
        <a>:</a>
        <span id="minutes">00</span>
        <a>:</a>
        <span id="seconds">00</span>
      </div>
    </div>
    <div class="timer-control">
      <button class="start">Старт</button>
      <button class="pause">Пауза</button>
      <button class="restart">Перезапуск</button>
    </div>
  </figure>
  <figure class="second-figure">
    <h2>Введите данные</h2>
    <div class="set-data">
      <label>Введите количество часов</label>
      <input type="text" name="hours" value="3" placeholder="Введите количество часов">
      <label>Введите количество минут</label>
      <input type="text" name="minuts" value="00" placeholder="Введите количество минут">
      <label>Введите количество секунд</label>
      <input type="text" name="second" value="00" placeholder="Введите количество секунд">
      <input type="submit" value="Продолжить">
    </div>
  </figure>
</main>

Ваш ответ

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

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