Правильный ли таймер на JS?

Question

[agromov91]

Только изучаю javascript, прошел третью часть learn.javascript.ru
На досуге решил для себя набросать ради опыта простой таймер.
Примеры не смотрел как делают другие, постарался опираться лишь на свои знания.

https://jsfiddle.net/bu5zq04s/

Более менее правильный подход для начинающего? Или все через одно место?))

Answer 1

[Stalker_RED]

Кроме обработчиков есть еще один довольно распространенный косяк
setInterval(foo, 1000) НЕ будет срабатывать раз в секунду.
Он будет срабатывать не раньше чем через секунду, но позже - запросто. В зависимости от загруженности системы, анимация, и всякого такого. а еще пользователь может переключиться на ждругую вкладку, а на неактивной все замедлится. В результате такой таймер будет отставать.
Лучше на старте запоминать время, и каждом тике вычислять разницу между запомненным и текущим..

Answer 2

[Алексей Ярков]

Навешивать обработчики внутри других обработчиков, ну такое себе решение. В остальном норм, ничего криминального ))

Comments

[agromov91]

А как правильно сделать по другому, если например мне не нужно отслеживать обработчики по паузе и сбросу пока я таймер не запустил?

[agromov91]

Там есть еще некоторые моменты, как secondsValue === '0-1' которые не всем могут быть понятные, но это на скорую руку делал, что бы по 10 раз не приводить из одного типа в другой)

[Алексей Ярков]

agromov91, https://jsfiddle.net/yarkov_aleksei/qybgj3v6/

[agromov91]

Алексей Ярков, Понял. Спасибо!

Answer 3

[Alex]

У вас там серёзный баг:

• Каждый раз при клике на "Старт" создаётся ещё один обработчик клика по "СТОП" и клика по "СБРОС"
  
• Каждый раз кликнув в "СТОП" создаётся ещё один обработчик клика по "СТАРТ"
  

Добавьте логирование и посмотрите сколько раз какие обработчики запускаются. Тут нужно либо инициализацию обработчиков перенести выше, чтобы они навешивались только один раз. Любо их постоянно добавлять, но не забывать удалять.

Comments

[agromov91]

Спасибо. Про то что создаются ненужные копии обработчиков и то что их нужно удалять понял.

А что имеете в виду под "либо инициализацию обработчиков перенести выше"?

[Alex]

agromov91, Не навешивать обработчик по какому то событию, а навешивать раньше/глобальнее/выше — скажем при старте программы.

И уже внутри каждого обработчика перед выполнением проверять нужно ли ему что-то делать. Скажем обработчик "СТОП" перед тем как что-то делать проверяет запущен ли таймер. Если нет — просто завершает работу.

[agromov91]

Alex, Спасибо!

[Alex]

agromov91, Вот вам пример для изучения https://jsfiddle.net/kozack/jdy8no0v/34/
Не скажу что это прям идеально. Но как пример альтернативного подхода будет полезно