<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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):

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