Таймер отсчета на JS
Таймер в JS нужен для запуска функции (некий набор действий), через заданное количество времени. Без таймера эта функция так и так бы запустилась, но здесь ключевой момент – отсроченный запуск во времени.
Простой пример из жизни. Запуск ракеты в космос (это функция) не происходит спонтанно, а по таймеру обратного отсчета.
Метод setTimeout()
Этот метод устанавливает таймер, передавая в круглых скобках два параметра (функцию и время задержки).
setTimeout(имя_функции, миллисекунды); // 1000 = 1 с
Код ниже, при клике по кнопке, запустит alert окно через 5 секунд.
<button onclick="setTimeout(goRocket, 5000);">Пуск</button>
<script>
function goRocket() {
alert('Произошел запуск ракеты');
}
</script>
Рассмотрим ниже несколько примеров, области применения setTimeout().
Как запускается функция по таймеру без клика по кнопке? Вариант самопроизвольного запуска таймера, встречается намного чаще в веб-разработке (слайдеры, всплывающие окна, слайдеры), чем при событии клика.
Таймер отсчета (вперед)
Вернемся к нашим ракетам. Перед стартом ракеты, на табло поочередно выводится информация, через заданные промежутки времени.
// Внутри параграфа будет выводиться информация
<p id="rocket"></p>
<script>
timedInfo(); // вызов функции, обязателен, иначе не сработает
function timedInfo() {
setTimeout(one, 1000)
setTimeout(two, 3000)
setTimeout(three, 5000)
}
function one() {
document.getElementById("rocket").innerHTML = "Установить связь с центром!";
}
function two() {
document.getElementById("rocket").innerHTML = "Пристегнуть ремни!";
}
function three() {
document.getElementById("rocket").innerHTML = "Контрольная проверка связи!";
}
</script>
Перезапустите скрипт, нажав на Rerun в правом нижнем углу.
See the Pen Таймер отсчета by porsake (@porsake) on CodePen.
Таймер обратного отсчета
Ракета и экипаж уже готовы к полёту и мы запускаем таймер обратного отсчета. Задекларируем переменную x, где будет храниться стартовое число 10. Создадим функцию countdown(), задачей которой будет вывод в параграфе значения обратного отсчета, уменьшаемого на единицу x--.
В начале скрипта мы объявили пустую переменную timer. Присвоим ей запуск таймера setTimeout(countdown, 1000), через 1 секунду.
// параграф для вывода значения отсчета
<p id="rocket"></p>
<script>
let timer; // пока пустая переменная
let x =10; // стартовое значение обратного отсчета
countdown(); // вызов функции
function countdown(){ // функция обратного отсчета
document.getElementById('rocket').innerHTML = x;
x--; // уменьшаем число на единицу
if (x<0){
clearTimeout(timer); // таймер остановится на нуле
alert('Стоп таймер и пуск ракеты!');
}
else {
timer = setTimeout(countdown, 1000);
}
}
</script>
Перезапустите скрипт, нажав на Rerun в правом нижнем углу.
See the Pen Таймер обратного отсчета by porsake (@porsake) on CodePen.
После вызова функции countdown(), пошел обратный отсчет, перевалил за ноль и ушел в минус. Так ракета никогда не взлетит, пока работает таймер. Что делать?
Как остановить таймер?
Почему таймер уходит в минус (популярный вопрос на форумах)? Такая проблема возникает у новичков на таймере обратного отсчета, если не использовать метод clearTimeout().
Мы оказались в ситуации условного выбора if-else. Необходимо задать условие, при котором таймер должен остановиться. Если (if) x<0, то таймер остановиться clearTimeout() и выскочит alert "Стоп таймер и пуск ракеты!", в противном случае (else) из переменной timer, вызовется функция обратного отсчета с отсрочкой в 1 секунду и мы увидим, как уменьшаясь на единицу, выводятся числа от 10 до 0.
Заключение
Умение работать с таймерами необходимо всем веб-разработчикам. Можете быть, более-менее уверенны в том, что без слайдера, счетчика обратного отсчета для акций, всплывающих окон, уже не обходится ни один сайт. А тут, как не крути, нужны хорошие знания JavaScript, а я со своей стороны порекомендую мой видеокурс.
-
Создано 03.04.2019 10:09:29
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.