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
    Commented 26 февр. 2019 в 22:24
  • Так я старт один раз жму. Потом у меня появляется кнопка паузы вместо старта Commented 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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