<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Таймер отсчета на JS

Таймер отсчета на 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, а я со своей стороны порекомендую мой видеокурс.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.