Работа с таймерами
В данном уроке мы научимся работать с таймерами в JavaScript. Разобравшись с таймерами, вы сможете автоматически выполнять на странице какие-либо операции через заданный промежуток времени. К примеру, можно будет сделать слайдер картинок, в котором картинки будут меняться каждую секунду.
Пожалуйста, напишите в комментариях, какой информации вам не хватило в данном уроке.
Метод setInterval
Метод setInterval работает следующим образом:
- первым параметром она принимает имя функции (без кавычек и круглых скобок),
- вторым параметром - через какой промежуток запускать эту функцию. Второй параметр задается в миллисекундах (1000 миллисекунд = 1 секунда).
Вышеуказанный код будет запускать функцию timer раз в секунду. И каждую секунду эта функция timer будет выполнять какие-то полезные операции, например, увеличивать счетчик на странице.
parseInt преобразует строку в число
Метод clearInterval
Мы уже знаем, как запустить таймер, давайте теперь научимся его останавливать.
Для этого используется метод clearInterval, который принимает уникальный номер того таймера (созданного через setInterval), который нужно остановить.
То есть при создание таймера через setInterval мы можем узнать его номер, и потом передать его методу clearInterval, чтобы таймер остановился.
В этом примере демонстрируется работа с clearInterval. Обратите внимание на то, что запуск и остановка таймера - это разные функции. Чтобы передать номер таймера из одной функции в другую используется глобальные переменные (свойства объекта window: window.timerId). При каждом новом запуске в window.timerId будет лежать новое значение.
Пример:
В данном скрипте есть нюанс - если много раз по нажимать на кнопку start, не нажимая stop, то вы запустите много таймеров, каждый из которых будет менять содержимое инпута. И получится так, что значения атрибута value будут меняться не раз в секунду, а гораздо чаще (и неравномерно). При этом кнопка stop сможет остановить только последний таймер. Так как каждый новый таймер будет затирать глобальную переменную window.timerId и там всегда будет лежать номер последнего запущенного таймера. Для этого надо после нажатия кнопки «старт» блокировать с помощью:
Метод setTimeout
Метод setTimeout - позволяет сделать задержку перед запуском кода (эта задержка случится только один раз и код выполнится только один раз, в отличии от setInterval).
Вторым параметром setTimeout принимает задержку
(в миллисекундах) перед запуском функции, которая задана первым параметром.
Например так: window.setTimeout(func, 3000) - по сути эта строчка вызывает функции func, однако эта функция сработает не сразу, а через 3 секунды.
Пример:
Давайте сделаем так, чтобы alert сработал через 3 секунды после нажатия на кнопку:
Метод setTimeout и рекурсия
Для наглядности начнем сразу с примера:
В данном примере значение атрибута value каждую секунду увеличивается на единицу. Сделано это хитрым образом: нажатие на кнопку start запускает функцию timer, которая увеличивает значение input на 1 и после этого вызывает саму себя с задержкой в 1 секунду. Получится, что через 1 секунду функция timer опять начнет работать, опять увеличит значение input и опять вызовет саму себя с задержкой. И так до бесконечности.
Как остановить.
Пример:
Остановить такой таймер можно просто не дав запуститься методу setTimeout, например, через if. Если в input value меньше 10-ти - то функция работает дальше.