Серия «JS черновики»

Бывают такие вечера, когда ты уже лет 10 не "программист", а просто уставший человек, которому очень нужно, чтобы программка заработала именно так, как ты задумал. Смотришь на неё и думаешь: "Ну что тут может быть сложного? Две минуты, таймер, перезагрузка…" Всё ок, но она как положено не работает на смартфоне...

Для тех, кто не пишет код каждый день, поясню: это как если бы ты настроил будильник на телефоне, а он, когда телефон лежит в кармане, просто не срабатывает. Не ломается — а именно "засыпает", потому что телефон экономит заряд. Это вшито в его функционал. Но от понимания этого не легче — нужно что-то сделать, чтобы всё заработало так, как задумано.

Вот и у меня была такая штука: мне нужен был простой таймер, который должен был отсчитать 2 минуты и перезагрузить конкретную страницу, и так до бесконечности. На компьютере работало всё идеально. А на мобильном, как только я сворачивал браузер в фон, при пробуждении меня ожидала тишина и — вместо обновления — новый отсчет. Цифры в "спящем режиме" замирали, будто время остановилось. Сначала я проверял этот глюк на разных телефонах, потом на разных браузерах: "что мертво, умереть не может"... На Андроидах в фоне таймеры специально замедляют? Это же базовая штука... Казалось бы, да. Но иногда такие мелочи просто из-за долгого отсутствия практики ускользают.

Открыл окошко с ИИ и не как обычно кинул написанный текст и написал "исправь ошибки". А обратился как к напарнику, который просто посидит рядом, посмотрит код, и, пока я делаю себе кофе и расслабленно жую плюшку, выдаст решение без усилий с моей стороны: мол, "смотри, вот тут косяк". Отправил в поле для запроса скрипт и честно написал: "После активации вкладки на мобильных, вместо обновления запускается новый отсчет. Проанализируй".

И началось то самое тихое чудо. Не фейерверк, не "вау, магия", а нормальный разговор. Сначала — объяснение: браузер душит таймеры, чтобы экономить батарею, и на мобильном это критично. Потом — идея: не считать время по тикам, а запоминать момент старта и сравнивать реальное время. Таймер оставить только для красивой цифры на экране, а настоящую проверку делать в момент, когда пользователь возвращается на вкладку. И сразу результат — новый и готовый скрипт, который можно вставить и проверить.

Вставил его на страницу и запустил на телефоне, свернул, перезагрузил устройство. Цифры бегут. Время идёт. Вкладка уходит в фон — таймер на экране замирает (чтобы не тратить ресурсы), но реальное время никуда не девается. И жестко установленные две минуты прошли, страница обновляется. И вот этот момент, когда ты видишь, что наконец-то всё работает и на компьютере, и на мобильном, — появляется одна мысль: "А что, так можно было?".

В голову сами собой лезут фильмы из детства: "Терминатор" и "Матрица". В "Терминаторе" машина — это абсолютный исполнитель: ты даёшь команду — она делает. Без вопросов. Для многих из нас именно так и выглядело программирование раньше: ты говоришь, компьютер слушается. Точка.

А "Матрица" — это про границы. Про то, как привычная реальность оказывается слоем абстракции, и, если копнуть глубже, там совсем другая логика. И вот этот переход от «я один знаю, как надо» к «давай разберём вместе, где подвох» — он как раз оттуда. Как будто ты спустился на уровень ниже и теперь видишь не только команды, но и среду, в которой они работают. И у тебя есть напарник, который тоже это видит.

Раньше только я говорил программе, что делать. Теперь она может сама найти оптимальный вариант кода. Это не про замену человека. Это про то, что даже когда любимое дело становится работой, в нём всё ещё остаётся место для маленького эксперимента. Когда ИИ анализирует исправляет ошибки, и программа начинает еще лучше работать.

В этом и есть самое приятное. Не в том, что ИИ всё починил, а в том, что он помог тебе самому увидеть решение. Как будто рядом сел опытный коллега с наметанным глазом, ткнул пальцем в строчку и просто сказал: "Смотри сюда".

Если кому-то вдруг нужно, то итоговый скрипт вышел вот таким. Суть, думаю, поняли: отсчитываем нужное количество минут и делаем то, что вам нужно (в моем случае просто перезагружаем страницу, показывая новый штрихкод карты лояльности).

<script type="text/javascript">

const DURATION_MS = 2 * 60 * 1000; // 2 минуты в миллисекундах

const startTime = Date.now();

let countdownTimer;

function updateCountdown() {

const elapsed = Date.now() - startTime;

const remainingMs = Math.max(0, DURATION_MS - elapsed);

const seconds = Math.ceil(remainingMs / 1000);

const span = document.querySelector('#countdown span');

if (span) {span.textContent = seconds;}

// Если время вышло — перезагружаем

if (remainingMs <= 0) {stopCountdown(); window.location.reload();}}

function startCountdown() {if (countdownTimer) return; countdownTimer = setInterval(updateCountdown, 1000); updateCountdown(); // сразу обновить без ожидания 1 секунды

}

function stopCountdown() {clearInterval(countdownTimer); countdownTimer = null;}

document.addEventListener('visibilitychange', () => {

if (!document.hidden) {// Вкладка стала активной: сначала проверяем, не истекло ли время

const elapsed = Date.now() - startTime;

if (elapsed >= DURATION_MS) {console.log('2 минуты прошли, перезагружаем при активации');

window.location.reload();

return;}// Если время ещё не вышло — запускаем/продолжаем отсчёт

startCountdown();} else {// Вкладку свернули — останавливаем тиканье таймера (экономим ресурсы)

stopCountdown();}});

// Если страница сразу открыта в активной вкладке — запускаем отсчёт

if (!document.hidden) {startCountdown();}

</script>