Как сделать cекундомер без setInterval и setTimeout?

Question

[Glglgl]

Пишу приложение на React native, нужен таймер который бы работал без setInterval и setTimeout, т.к. на странице много всего и при каждом тике setInterval или setTimeout, при задержке в 1000мс работают чуть дольше, в итоге на обычно секундомере проходит 36, а на моем через setInterval проходит 30. И вот уже нет идей как это реализовать.

Comments

[twobomb]

Осталось только requestAnimationFrame :D
Ну так ты при старте секундомера запоминай текущее время, timestamp запиши. И на каждом обновлении опять бери текущий timestamp и вычитай время начала, чтобы получить точное пройденное время.

[WbICHA]

setTimeout(func, 1000 - (Date.now() % 1000))
Поправил.

[Сергей Соколов]

WbICHA, визуально секунды будут щелкать не ритмично, вероятно.
Нааверное таки нужны более частые, чем раз-в-секунду тики. И показывать актуальную разницу во времени.

[WbICHA]

Сергей Соколов, в смысле? Если ничего не зависает, тики будут раз в 1000+-10 мс примерно, глазом такую разницу не заметить.

[Сергей Соколов]

WbICHA, не пробовал. Но в теории: тормознутость системы динамична, и чем длиннее таймаут, тем выше в итоге окажется погрешность. За секунду ожидания таймер вполне может задуматься на 300мс больше положенного, вероятно.

[WbICHA]

Сергей Соколов, не может, если другой код не исполняется.
Можешь в консоли проверить, вне зависимости от установленного времени таймаута, задержка всегда 0-15мс (фф).

Я выше допустил ошибку, на +-, а только +, потому что таймаут гарантирует, что он не будет вызван раньше установленного "дедлайна".

Answer 1

[Сергей Соколов]

Я за RAF! : )

let rafSeconds = 0;
const rafStart = Date.now();
const tick = () => {
  const seconds = (Date.now() - rafStart) / 1000 | 0;
  if (rafSeconds !== seconds) { // секунды изменились!
    rafSeconds = seconds;
    // TODO: отрисовать новые секунды
  }
  window.requestAnimationFrame(tick);
}

tick();

Comments

[WbICHA]

// TODO: отрисовать новые секунды

Нифигасе, тут туду подсвечивается. о_О

[Сергей Соколов]

WbICHA, а где-то автоматом создался тикет в жире )

Answer 2

[Stalker_RED]

const startTime = new Date();
setInterval(function() {
  const now = new Date();
  const diff = now - startTime;
  // тут немного математики и смело отрисовывай таймер привязанный к часам OS.
  console.log(diff)
}, 300);

Comments

[WbICHA]

Какое-то не очень решение, зачем каждые 300мс обновлять?
И не new Date(), а Date.now().

[Stalker_RED]

WbICHA, естественно это не финальное решение.
Про Date.now() поддерживаю, а 300 это не интервал отрисовки, а интервал проверки значения.
Если ставить 1000, то сильно заметно на глаз, когда счетчик на таймере меняется сразу на два. И да, наверное лучше поставить не 300, а 250 или 500, чтобы таймер шел равномернее.

[Ренат Олейник]

Неплохо, но человек попросил БЕЗ setInterval))

[WbICHA]

Ренат Олейник, по моему, автор чётко написал почему ему "надо" без. Он просто не знает как их использовать для таймера.

[Stalker_RED]

Ренат Олейник, можно то-же самое сделать на requestAnimationFrame, как в ответе Сергей Соколов, но нет особого смысла вычислять обновление для таймера в каждом кадре (обычно это 60фпс, или около 16ms). Но это будет просто соблюдение формальности, потому что автору в общем-то не мешает сам по себе setInterval, он хотел просто добиться большей точности. Вероятно он уже знает, что setInterval или setTimeout сработает не раньше заданного значения, что вполне допускает срабатывание позже, когда браузер занят какими-то другими задачами.

Answer 3

[rPman]

Можно через настройку обновления страницы <meta http-equiv="refresh" content="1">в каком нибудь фрейме, где на onload вызывается дочерний метод, но это садамаза.
НЕ НАДО ТАК ДЕЛАТЬ
----------------------

setInterval и setTimer самый правильные методы, только интервал в них нужно ставить не константное значение, а вычислять исходя из разницы ожидаемого времени и текущего (если оно больше нужного, секунд прибавлять не 1 а на сколько оно дальше убежало)