Как отмотать время на сайте

6

Как остановить/продлить таймер на сайте?

На сайте идёт таймер (04:00). Нужно сделать скрипт для его остановки или продления.
Сайт не мой.

• Вопрос задан более трёх лет назад
• 3368 просмотров

Оценить 1 комментарий

• Facebook
• Вконтакте
• Twitter

Скорее всего там используется setInterval(), и в таком случае, вам достаточно будет добавить две фичи:
1. запомнить текущее значение таймера и остановить его при помощи clearInterval()
2. запустить новый setIntrval с использованием запомненного значения.

HackWare.ru

Этичный хакинг и тестирование на проникновение, информационная безопасность

Веб-архивы Интернета: как искать удалённую информацию и восстанавливать сайты

Что такое Wayback Machine и Архивы Интернета

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

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

Многие Интернет Архивы хранят несколько версий одной и той же страницы, делая её снимок в разное время. Благодаря этому можно проследить историю изменения сайта или веб-страницы в течение всех лет существования.

В этой статье будет показано, как находить удалённую или изменённую информацию, как использовать Интернет Архивы для восстановления сайтов, отдельных страниц или файлов, а также некоторые другие случае использования.

Wayback Machine — это название одного из популярного веб архива сайтов. Иногда Wayback Machine используется как синоним «Интернет Архив».

Какие существуют веб-архивы Интернета

Я знаю о трёх архивах веб-сайтов (если вы знаете больше, то пишите их в комментариях):

• https://web.archive.org/
• http://archive.md/ (также использует домены http://archive.ph/ и http://archive.today/)
• http://web-arhive.ru/

web.archive.org

Этот сервис веб архива ещё известен как Wayback Machine. Имеет разные дополнительные функции, чаще всего используется инструментами по восстановлению сайтов и информации.

Для сохранения страницы в архив перейдите по адресу https://archive.org/web/ введите адрес интересующей вас страницы и нажмите кнопку «SAVE PAGE».

Для просмотра доступных сохранённых версий веб-страницы, перейдите по адресу https://archive.org/web/, введите адрес интересующей вас страницы или домен веб-сайта и нажмите «BROWSE HISTORY»:

В самом верху написано, сколько всего снимком страницы сделано, дата первого и последнего снимка.

Затем идёт шкала времени на которой можно выбрать интересующий год, при выборе года, будет обновляться календарь.

Обратите внимание, что календарь показывает не количество изменений на сайте, а количество раз, когда был сделан архив страницы.

Точки на календаре означают разные события, разные цвета несут разный смысл о веб захвате. Голубой означает, что при архивации страницы от веб-сервера был получен код ответа 2nn (всё хорошо); зелёный означает, что архиватор получил статус 3nn (перенаправление); оранжевый означает, что получен статус 4nn (ошибка на стороне клиента, например, страница не найдена), а красный означает, что при архивации получена ошибка 5nn (проблемы на сервере). Вероятно, чаще всего вас должны интересовать голубые и зелёные точки и ссылки.

При клике на выбранное время, будет открыта ссылка, например, http://web.archive.org/web/20160803222240/https://hackware.ru/ и вам будет показано, как выглядела страница в то время:

Используя эту миниатюру вы сможете переходить к следующему снимку страницы, либо перепрыгнуть к нужной дате:

Лучший способ увидеть все файлы, которые были архивированы для определённого сайта, это открыть ссылку вида http://web.archive.org/*/www.yoursite.com/*, например, http://web.archive.org/*/hackware.ru/

Кроме календаря доступна следующие страницы:

• Collections — коллекции. Доступны как дополнительные функции для зарегистрированных пользователей и по подписке
• Changes
• Summary
• Site Map

Changes

"Changes" — это инструмент, который вы можете использовать для идентификации и отображения изменений в содержимом заархивированных URL.

Начать вы можете с того, что выберите два различных дня какого-то URL. Для этого кликните на соответствующие точки:

И нажмите кнопку Compare. В результате будут показаны два варианта страницы. Жёлтый цвет показывает удалённый контент, а голубой цвет показывает добавленный контент.

Summary

В этой вкладке статистика о количестве изменений MIME-типов.

Site Map

Как следует из название, здесь показывается диаграмма карты сайта, используя которую вы можете перейти к архиву интересующей вас страницы.

Поиск по Интернет архиву

Если вместо адреса страницы вы введёте что-то другое, то будет выполнен поиск по архивированным сайтам:

Показ страницы на определённую дату

Кроме использования календаря для перехода к нужной дате, вы можете просмотреть страницу на нужную дату используя ссылку следующего вида: http://web.archive.org/web/ГГГГММДДЧЧММСС/АДРЕС_СТРАНИЦЫ/

Обратите внимание, что в строке ГГГГММДДЧЧММСС можно пропустить любое количество конечных цифр.

Если на нужную дату не найдена архивная копия, то будет показана версия на ближайшую имеющуюся дату.

archive.md

Адреса данного Архива Интернета:

• http://archive.md
• http://archive.ph/
• http://archive.today/

На главной странице говорящие за себя поля:

• Архивировать страницу, которая сейчас онлайн
• Искать сохранённые страницы

Для поиска по сохранённым страницам можно как указывать конкретный URL, так и домены, например:

• microsoft.com покажет снимки с хоста microsoft.com
• *.microsoft.com покажет снимки с хоста microsoft.com и всех его субдоменов (например, www.microsoft.com)
• http://twitter.com/burgerkingfor покажет архив данного url (поиск чувствителен к регистру)
• http://twitter.com/burg* поиск архивных url начинающихся с http://twitter.com/burg

Данный сервис сохраняет следующие части страницы:

• Текстовое содержимое веб страницы
• Изображения
• Содержимое фреймов
• Контент и изображения загруженные или сгенерированные с помощью Javascript на сайтах Web 2.0
• Скриншоты размером 1024×768 пикселей.

Не сохраняются следующие части веб-страниц:

• Flash и загружаемый им контент
• Видео и звуки
• PDF
• RSS и другие XML-страницы сохраняются ненадёжно. Большинство из них не сохраняются, или сохраняются как пустые страницы.

Архивируемая страница и все изображения должны быть менее 50 Мегабайт.

Для каждой архивированной страницы создаётся ссылка вида http://archive.is/XXXXX, где XXXXX это уникальный идентификатор страницы. Также к любой сохранённой странице можно получить доступ следующим образом:

• http://archive.is/2013/http://www.google.de/ — самый новый снимок в 2013 году.
• http://archive.is/201301/http://www.google.de/ — самый новый снимок в январе 2013.
• http://archive.is/20130101/http://www.google.de/ — самый новый снимок в течение дня 1 января 2013.

Дату можно продолжить далее, указав часы, минуты и секунды:

• http://archive.is/2013010103/http://www.google.de/
• http://archive.is/201301010313/http://www.google.de/
• http://archive.is/20130101031355/http://www.google.de/

Для улучшения читаемости, год, месяц, день, часы, минуты и секунды могут быть разделены точками, тире или двоеточиями:

• http://archive.is/2013-04-17/http://blog.bo.lt/
• http://archive.is/2013.04.17-12:08:20/http://blog.bo.lt/

Также возможно обратиться ко всем снимкам указанного URL:

• http://archive.is/http://www.google.de/

Все сохранённые страницы домена:

• http://archive.is/www.google.de

Все сохранённые страницы всех субдоменов

• http://archive.is/*.google.de

Чтобы обратиться к самой последней версии страницы в архиве или к самой старой, поддерживаются адреса вида:

• http://archive.is/newest/http://reddit.com/
• http://archive.is/oldest/http://reddit.com/

Чтобы обратиться к определённой части длинной страницы имеется две опции:

• добавить хэштег (#) с позицией прокрутки в качество которого число между 0 (вершина страницы) и 100 (низ страницы). Например, http://archive.md/dva4n#95%
• выбрать текст на страницы и получить URL с хэштегом, указывающим на этот раздел. Например, http://archive.is/FWVL#selection-1493.0-1493.53

В доменах поддерживаются национальные символы:

• http://archive.is/www.maroñas.com.uy
• http://archive.is/*.测试

Обратите внимание, что при создании архивной копии страницы архивируемому сайту отправляется IP адрес человека, создающего снимок страницы. Это делается через заголовок X-Forwarded-For для правильного определения вашего региона и показа соответствующего содержимого.

web-arhive.ru

Архив интернет (Web archive) — это бесплатный сервис по поиску архивных копий сайтов. С помощью данного сервиса вы можете проверить внешний вид и содержимое страницы в сети интернет на определённую дату.

На момент написания, этот сервис, вроде бы, нормально не работает («Database Exception (#2002)»). Если у вас есть по нему какие-то новости, то пишите их в комментариях.

Поиск сразу по всем Веб-архивам

Может так случиться, что интересующая страница или файл отсутствует в веб архиве. В этом случае можно попытаться найти интересующую сохранённую страницу в другом Архиве Интернета. Специально для этого я сделал довольно простой сервис, который для введённого адреса даёт ссылки на снимки страницы в рассмотренных трёх архивах.

Что делать, если удалённая страница не сохранена ни в одном из архивов?

Архивы Интернета сохраняют страницы только если какой-то пользователь сделал на это запрос — они не имеют функции обходчиков и ищут новые страницы и ссылки. По этой причине возможно, что интересующая вас страница оказалась удалено до того, как была сохранена в каком-либо веб-архиве.

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

Если ввести подобный запрос в поиск Google, то сразу будет открыта страница из кэша.

Для просмотра текстовой версии можно использовать ссылку вида:

• http://webcache.googleusercontent.com/search?q=cache:URL&strip=1&vwsrc=0

Для просмотра исходного кода веб страницы из кэша Google используйте ссылку вида:

• http://webcache.googleusercontent.com/search?q=cache:URL&strip=0&vwsrc=1

Например, текстовый вид:

Как полностью скачать сайт из веб-архива

Если вы хотите восстановить удалённый сайт, то вам поможет программа Wayback Machine Downloader.

Программа загрузит последнюю версию каждого файла, присутствующего в Архиве Интернета Wayback Machine, и сохранить его в папку вида ./websites/example.com/. Она также пересоздаст структуру директорий и автоматически создаст страницы index.html чтобы скаченный сайт без каких либо изменений можно было бы поместить на веб-сервер Apache или Nginx.

Об установке программы и дополнительных опциях смотрите на странице https://kali.tools/?p=5211

Пример скачивания полной копии сайта suip.biz из веб-архива:

Структура скаченных файлов:

Локальная копия сайта, обратите внимание на провайдера Интернет услуг:

Как скачать все изменения страницы из веб-архива

Если вас интересует не весь сайт, а определённая страница, но при этом вам нужно проследить все изменения на ней, то в этом случае используйте программу Waybackpack.

К примеру для скачивания всех копий главной страницы сайта suip.biz, начиная с даты (—to-date 2017), эти страницы должны быть помещены в папку (-d /home/mial/test), при этом программа должна следовать HTTP редиректам (—follow-redirects):

Чтобы для указанного сайта (hackware.ru) вывести список всех доступных копий в веб-архиве (—list):

Как узнать все страницы сайта, которые сохранены в веб-архиве

Для получения ссылок, которые хранятся в Архиве Интернета, используйте программу waybackurls.

Эта программа извлекает все URL указанного домена, о которых знает Wayback Machine. Это можно использовать для быстрого составления карты сайта.

Чтобы получить список всех страниц о которых знает Wayback Machine для домена suip.biz:

Заключение

Предыдущие три программы рассмотрены совсем кратко. Дополнительную информацию об их установке и об имеющихся опциях вы сможете найти по ссылкам на карточки этих программ.

Планирование: setTimeout и setInterval

Мы можем вызвать функцию не в данный момент, а позже, через заданный интервал времени. Это называется «планирование вызова».

Для этого существуют два метода:

• setTimeout позволяет вызвать функцию один раз через определённый интервал времени.
• setInterval позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени.

Эти методы не являются частью спецификации JavaScript. Но большинство сред выполнения JS-кода имеют внутренний планировщик и предоставляют доступ к этим методам. В частности, они поддерживаются во всех браузерах и Node.js.

setTimeout

func|code Функция или строка кода для выполнения. Обычно это функция. По историческим причинам можно передать и строку кода, но это не рекомендуется. delay Задержка перед запуском в миллисекундах (1000 мс = 1 с). Значение по умолчанию – 0. arg1 , arg2 … Аргументы, передаваемые в функцию

Например, данный код вызывает sayHi() спустя одну секунду:

Если первый аргумент является строкой, то JavaScript создаст из неё функцию.

Это также будет работать:

Но использование строк не рекомендуется. Вместо этого используйте функции. Например, так:

Начинающие разработчики иногда ошибаются, добавляя скобки () после функции:

Это не работает, потому что setTimeout ожидает ссылку на функцию. Здесь sayHi() запускает выполнение функции, и результат выполнения отправляется в setTimeout . В нашем случае результатом выполнения sayHi() является undefined (так как функция ничего не возвращает), поэтому ничего не планируется.

Отмена через clearTimeout

Вызов setTimeout возвращает «идентификатор таймера» timerId , который можно использовать для отмены дальнейшего выполнения.

Синтаксис для отмены:

В коде ниже планируем вызов функции и затем отменяем его (просто передумали). В результате ничего не происходит:

Как мы видим из вывода alert , в браузере идентификатором таймера является число. В других средах это может быть что-то ещё. Например, Node.js возвращает объект таймера с дополнительными методами.

Повторюсь, что нет единой спецификации на эти методы, поэтому такое поведение является нормальным.

Для браузеров таймеры описаны в разделе таймеров стандарта HTML5.

setInterval

Метод setInterval имеет такой же синтаксис как setTimeout :

Все аргументы имеют такое же значение. Но отличие этого метода от setTimeout в том, что функция запускается не один раз, а периодически через указанный интервал времени.

Чтобы остановить дальнейшее выполнение функции, необходимо вызвать clearInterval(timerId) .

Следующий пример выводит сообщение каждые 2 секунды. Через 5 секунд вывод прекращается:

В большинстве браузеров, включая Chrome и Firefox, внутренний счётчик продолжает тикать во время показа alert/confirm/prompt .

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

Вложенный setTimeout

Есть два способа запускать что-то регулярно.

Один из них setInterval . Другим является вложенный setTimeout . Например:

Метод setTimeout выше планирует следующий вызов прямо после окончания текущего (*) .

Вложенный setTimeout – более гибкий метод, чем setInterval . С его помощью последующий вызов может быть задан по-разному в зависимости от результатов предыдущего.

Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд… Вот псевдокод:

А если функции, которые мы планируем, ресурсоёмкие и требуют времени, то мы можем измерить время, затраченное на выполнение, и спланировать следующий вызов раньше или позже.

Вложенный setTimeout позволяет задать задержку между выполнениями более точно, чем setInterval .

Сравним два фрагмента кода. Первый использует setInterval :

Второй использует вложенный setTimeout :

Для setInterval внутренний планировщик будет выполнять func(i) каждые 100 мс:

Реальная задержка между вызовами func с помощью setInterval меньше, чем указано в коде!

Это нормально, потому что время, затраченное на выполнение func , использует часть заданного интервала времени.

Вполне возможно, что выполнение func будет дольше, чем мы ожидали, и займёт более 100 мс.

В данном случае движок ждёт окончания выполнения func и затем проверяет планировщик и, если время истекло, немедленно запускает его снова.

В крайнем случае, если функция всегда выполняется дольше, чем задержка delay , то вызовы будут выполняться без задержек вообще.

Ниже представлено изображение, показывающее процесс работы рекурсивного setTimeout :

Вложенный setTimeout гарантирует фиксированную задержку (здесь 100 мс).

Это потому, что новый вызов планируется в конце предыдущего.

Когда функция передаётся в setInterval/setTimeout , на неё создаётся внутренняя ссылка и сохраняется в планировщике. Это предотвращает попадание функции в сборщик мусора, даже если на неё нет других ссылок.

Для setInterval функция остаётся в памяти до тех пор, пока не будет вызван clearInterval .

Есть и побочный эффект. Функция ссылается на внешнее лексическое окружение, поэтому пока она существует, внешние переменные существуют тоже. Они могут занимать больше памяти, чем сама функция. Поэтому, если регулярный вызов функции больше не нужен, то лучше отменить его, даже если функция очень маленькая.

setTimeout с нулевой задержкой

Особый вариант использования: setTimeout(func, 0) или просто setTimeout(func) .

Это планирует вызов func настолько быстро, насколько это возможно. Но планировщик будет вызывать функцию только после завершения выполнения текущего кода.

Так вызов функции будет запланирован сразу после выполнения текущего кода.

Например, этот код выводит «Привет» и затем сразу «Мир»:

Первая строка помещает вызов в «календарь» через 0 мс. Но планировщик проверит «календарь» только после того, как текущий код завершится. Поэтому "Привет" выводится первым, а "Мир" – после него.

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

В браузере есть ограничение на то, как часто внутренние счётчики могут выполняться. В стандарте HTML5 говорится: «после пяти вложенных таймеров интервал должен составлять не менее четырёх миллисекунд.».

Продемонстрируем в примере ниже, что это означает. Вызов setTimeout повторно вызывает себя через 0 мс. Каждый вызов запоминает реальное время от предыдущего вызова в массиве times . Какова реальная задержка? Посмотрим:

Первый таймер запускается сразу (как и указано в спецификации), а затем задержка вступает в игру, и мы видим 9, 15, 20, 24. .

Аналогичное происходит при использовании setInterval вместо setTimeout : setInterval(f) запускает f несколько раз с нулевой задержкой, а затем с задержкой 4+ мс.

Это ограничение существует давно, многие скрипты полагаются на него, поэтому оно сохраняется по историческим причинам.

Этого ограничения нет в серверном JavaScript. Там есть и другие способы планирования асинхронных задач. Например, setImmediate для Node.js. Так что это ограничение относится только к браузерам.

Итого

• Методы setInterval(func, delay, . args) и setTimeout(func, delay, . args) позволяют выполнять func регулярно или только один раз после задержки delay , заданной в мс.
• Для отмены выполнения необходимо вызвать clearInterval/clearTimeout со значением, которое возвращают методы setInterval/setTimeout .
• Вложенный вызов setTimeout является более гибкой альтернативой setInterval . Также он позволяет более точно задать интервал между выполнениями.
• Планирование с нулевой задержкой setTimeout(func,0) или, что то же самое, setTimeout(func) используется для вызовов, которые должны быть исполнены как можно скорее, после завершения исполнения текущего кода.
• Браузер ограничивает 4-мя мс минимальную задержку между пятью и более вложенными вызовами setTimeout , а также для setInterval , начиная с 5-го вызова.

Обратим внимание, что все методы планирования не гарантируют точную задержку.

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

• Перегружен процессор.
• Вкладка браузера в фоновом режиме.
• Работа ноутбука от аккумулятора.

Всё это может увеличивать минимальный интервал срабатывания таймера (и минимальную задержку) до 300 или даже 1000 мс в зависимости от браузера и настроек производительности ОС.

Задачи

Вывод каждую секунду

Напишите функцию printNumbers(from, to) , которая выводит число каждую секунду, начиная от from и заканчивая to .

Работа с таймерами в JavaScript

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

• Урок №
  Учебник
  по регулярным выражениям
• Урок №
  Работа с регулярными
  выражениями. Глава 1.
• Урок №
  Работа с регулярными
  выражениями. Глава 2.
• Урок №
  Работа с регулярными
  выражениями. Глава 3.
• Урок №
  Работа с регулярными
  выражениям. Глава 4.
• Урок №
  Отличия
  от PHP версии

Разное

• Урок №
  Работа
  с форматом JSON
• Урок №
  Работа
  с куки (cookie)
• Урок №
  Работа
  с локальным хранилищем
• Урок №
  Анимация
  и другие эффекты

Работа с канвасом

• Урок №
  Учебник
  по работе с canvas
• Урок №
  Основы
  работы с canvas
• Урок №
  Продвинутая
  работа с canvas

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

• Урок №
  Работа
  с контекстом и this
• Урок №
  Продвинутая
  работа с контекстом

Drag-and-Drop

• Урок №
  новая вкладка с new.code.mu
  Доступные события
• Урок №
  новая вкладка с new.code.mu
  Перемещение элемента по окну
• Урок №
  новая вкладка с new.code.mu
  Перемещение на другой элемент
• Урок №
  новая вкладка с new.code.mu
  Объект event.dataTransfer
• Урок №
  новая вкладка с new.code.mu
  Картинка при перетягивании
• Урок №
  новая вкладка с new.code.mu
  Вид курсора

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд без ООП для разминки
• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд ООП вариант
• Урок №
  новая вкладка ютуб
  Хранение массива в локальном хранилище (предварительная теория)
• Урок №
  новая вкладка ютуб
  Стикеры ООП (нужны основы Drag-and-Drop, выше в учебнике есть)

Практика

• Урок №
  новая вкладка с new.code.mu
  Тип Symbol
• Урок №
  новая вкладка с new.code.mu
  Итераторы и генераторы

Promise ES6

• Урок №
  новая вкладка с new.code.mu
  Функции resolve reject
• Урок №
  новая вкладка с new.code.mu
  Метод catch
• Урок №
  новая вкладка с new.code.mu
  Цепочки промисов
• Урок №
  новая вкладка с new.code.mu
  Перехват ошибок
• Урок №
  новая вкладка с new.code.mu
  Promise.all
• Урок №
  новая вкладка с new.code.mu
  Promise.race
• Урок №
  новая вкладка с new.code.mu
  async await
• Урок №
  новая вкладка с new.code.mu
  Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

• Урок №
  Учебник
  jQuery для новичков
• Урок №
  Основы
  работы с jQuery
• Урок №
  Манипулирование
  элементами страницы
• Урок №
  Работа
  с набором элементов
• Урок №
  Работа
  с событиями jQuery
• Урок №
  Эффекты и анимация
  библиотеки jQuery
• Урок №
  Практика на отработку
  библиотеки jQuery
• Урок №
  Работа с
  библиотекой jQueryUI
• Урок №
  Популярные плагины
  библиотеки jQuery

В данном уроке мы научимся работать с таймерами в JavaScript. Разобравшись с таймерами, вы сможете автоматически выполнять на странице какие-либо операции через заданный промежуток времени. К примеру, можно будет сделать слайдер картинок, в котором картинки будут меняться каждую секунду.

Для работы с таймерами в JavaScript используется метод setInterval, который запускает заданный код через определенные промежутки времени.

Метод setInterval

Метод setInterval работает следующим образом: первым параметром она принимает имя функции (без кавычек и круглых скобок), а вторым параметром — через какой промежуток запускать эту функцию. Второй параметр задается в миллисекундах (1000 миллисекунд = 1 секунда).

Пример: window.setInterval(timer, 1000) — этот код будет запускать функцию timer раз в секунду. И каждую секунду эта функция timer будет выполнять какие-то полезные операции, например, увеличивать счетчик на странице.

Давайте рассмотрим нужный для этого код. Пусть у нас дан инпут. Будем каждую секунду увеличивать значение его атрибута value на единицу:

Обратите внимание на функцию parseInt — она преобразует строку из атрибута value в число.

Это нужно, так как атрибут всегда отдает строку, даже если там хранится число, как у нас, то есть elem.value вернет ‘1’, а не 1 (в самом начале таймера, когда в атрибуте еще 1). И получится, что elem.value + 1 это ‘1’+1, что дает ’11’, а не 2).

Поэтому, если не применять parseInt — скрипт начнет складывать наши числа как строки и мы увидим, что в инпуте сначала будет 1, потом 11, потом 111 и так далее.

Если же написать parseInt, то в инпуте будет сначала 1, потом 2, потом 3 и так далее.

Остановка таймера

Вы уже знаете, как запустить таймер, давайте теперь научимся его останавливать. Для этого используется метод clearInterval, который принимает уникальный номер того таймера (созданного через setInterval), который нужно остановить.

Давайте посмотрим откуда берется этот номер:

То есть при создание таймера через setInterval мы можем узнать его номер, и потом передать его методу clearInterval, чтобы таймер остановился.

В следующем примере демонстрируется работа с clearInterval. Обратите внимание на то, что запуск и остановка таймера — это разные функции. Чтобы передать номер таймера из одной функции в другую я использую глобальные переменные (свойства объекта window), которые мы с вами уже разбирали раньше:

Запустите этот код и понажимайте на кнопки. Кнопка start будет запускать таймер, а кнопка stop — останавливать. Причем таймер можно запускать и останавливать много раз — счетчик в инпуте продолжит с того места, где он остановился. Только в window.timerId при каждом новом запуске будет лежать новое значение.

Если еще один нюанс — если много раз понажимать на кнопку start, не нажимая stop, то вы запустите много таймеров, каждый из которых будет менять содержимое инпута. И получится так, что значения атрибута value будут меняться не раз в секунду, а гораздо чаще (и неравномерно). При этом кнопка stop сможет остановить только последний таймер (так как каждый новый таймер будет затирать глобальную переменную window.timerId и там всегда будет лежать номер последнего запущенного таймера).

Метод setTimeout

Следующий метод, который нам нужен, называется setTimeout. Он позволяет сделать задержку перед запуском кода (эта задержка случится только один раз и код выполнится только один раз, в отличии от setInterval).