«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Функции в JS часто выполняются не сразу, а через какой-то промежуток времени. Или выполняются периодически.

Здесь мы научимся управлять временем выполнения скриптов и напишем самую простую JS-анимацию: при возникновении события - перемещение дочернего элемента внутри родительского.

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

А также ответим на вопросы: Чем рекурсивный setTimeout лучше, чем setInterval? И в чем минус использования метода setInterval?



Метод setTimeout - Синтаксис - 2 аргумента

Метод setTimeout - запускает функцию один раз через заданный промежуток времени.

Метод setTimeout принимает 2 или 3 аргумента.

1-ый аргумент - это функция, которая вызывается через заданный промежуток времени (в миллисекундах) - это 2-ой аргумент.

JavaScript-код

const timerId = setTimeout(function() {
	console.log('Hello');
}, 2000);

В данном случае первым аргументом метода setTimeout является анонимная функция, которая срабатывает через 2 секунды.

Метод setTimeout - 3-ий аргумент

Метод setTimeout может принимать 3-ий аргумент, который будут являться аргументом для внутренней функции.

JavaScript-код

const timerId = setTimeout(function(text) {
	console.log(text);
}, 2000, 'Hi');

3-ий аргмент текст 'Hi' - является аргументом text функции.

 

setTimeout - Аргумент функция

В примере ниже в качестве аргумента в метод setTimeout передается функция.

Метод setTimeout принимает функцию - ее объявление/название. Но НЕ вызывает ее.

const timerId = setTimeout(logger, 2000);

function logger(){
	console.log('By');
}

Отметим еще раз, что функция именно передается/не вызывается - указывается имя функции без круглых скобок (имя является ссылкой на функцию). Функция вызывается лишь по истечении указанного времени (второй аргумент).

Метод clearInterval - Остановка скрипта

Код из примеров выше будет работать и без объявления переменной.

setTimeout(logger, 2000);

function logger(){
	console.log('By By');
}

Однако обычно так НЕ работают. И помещают конструкцию setTimeout в какую-либо переменную. Для чего это делается?

Дело в том, что таких асинхронных скриптов с использованием метода setTimeout может быть несколько на странице. И необходимость в выполнении какого-либо скрипта может отпасть. Поэтому должна быть возможность ими как-то управлять, например, останавливать.

Как это бывает? Допустим, есть скрипт, который через 10 секунд нашего пребывания на странице запускает модальное окно с предложением что-то купить. И если пользователь соглашается на это: нажимает "ДА" или ещё что-то, то разработчик должен предусмотреть вариант остановки этого скрипта.

Отменить выполнение скрипта можно при помощи команды clearInterval().

Метод clearInterval принимает в качестве аргумента идентификатор скрипа/переменную, в которую тот был помещен.

const timerId = setTimeout(logger, 2000);

clearInterval(timerId); // Отменяем выполнение скрипта

function logger(){
	console.log('By');
}

Здесь скрипт выполняться уже НЕ будет. В начале кода Таймер был запущен, но сразу же остановлен.

Метод setInterval + Запуск скрипта по событию

Метод setInterval - запускает функцию регулярно через заданный промежуток времени.

Реализуем следующее: функция запускается по событию - при клике по кнопке. И выполняется периодически/регулярно (setInterval).

И прекращает выполняться (clearInterval) после N-го количества раз.

Скачать Архив с исходными данными

HTML-код

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   	<title>Java Script</title>
   	<link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button class="btn">Animation</button>
    <div class="wrapper">
        <div class="box"></div>
    </div>

	<script src="script.js"></script>
  </body>
</html>

JavaScript-код

'use strict';

const btn = document.querySelector('.btn');
let timerId,
    i = 0;

btn.addEventListener('click', () => {
	timerId = setInterval(logger, 1000);
});

function logger () {
	console.log('By');
	i++;
	if (i === 3){
		clearInterval(timerId);
	}
}

Результат в Браузере

1. Получаем доступ к кнопке.

2. Объявляем глобальную переменную let timerId, чтобы была возможность использовать ее как в функции logger, так и в функции-обработчике.

3. При клике по кнопке начинает периодически выполняться скрипт - функция logger (метод setInterval). И прекращает через N-е количества раз (метод clearInterval).

Метод setInterval - Простая JS-анимация

Здесь будет реализована простейшая анимация средствами JavaScript.

Продолжим работать с HTML-кодом из примера выше (там же можно скачать архив с исходниками).

Что нужно сделать?

Нужно чтобы один/меньший квадрат двигался по диагонали внутри другого (большего квадрата).

Движение начинается при клике по кнопке.

Конечное положение синего квадрата - правый нижний угол родительского квадрата.

Что нужно учесть?

1) Меньший/синий квадрат с классом .box имеет размер 100х100px и свойство position: absolute. Родительский/больший квадрат с классом .wrapper имеет размер 400х400px и свойство position: relative. О позиционировании элементов читайте здесь.

2) Следовательно. Чтобы синий квадрат сместился по диагонали в правый нижний угол нужно: добавить для него CSS-свойства top: 300px и left: 300px.

3) Значения свойств top и left будут меняться постепенно с интервалом в 1px. В этом нам поможет метод setInterval.

Метод clearInterval отменит выполнение скрипта при соответствующем значении свойств top и left.

JavaScript-код

const btn = document.querySelector('.btn');

function myAnimation(){
	
	const elem = document.querySelector('.box');
	let pos = 0;

	const id = setInterval(frame, 10);
	function frame() {
		
		if (pos == 300){
			clearInterval(id);
		}
		else{
			pos++;
			elem.style.top = pos + 'px';
			elem.style.left = pos + 'px';
		}		
	}
}

btn.addEventListener('click', myAnimation);

Результат в Браузере

1. Получаем доступ к кнопке, при клике по которой запускается функция myAnimation.

2. Внутри функции myAnimation получаем доступ к внутреннему квадрату и устанавливаем для переменной pos (позиционирование) значение 0.

3. Используя метод setInterval, через минимальный интервал времени запускаем функцию frame, которая:

  • При помощи инлайн-стилей задает для дочернего квадрата значения CSS-свойств top и left. И увеличивает значение переменной pos на 1 при каждом своем вызове p++;
  • Таким образом, значения свойств top и left постепенно меняются от 0 до 300. А при значении 300 - метод clearInterval отменяет выполнение скрипта.

Рекурсивный setTimeout

Чем рекурсивный setTimeout лучше, чем setInterval?

Напомним, что такое Рекурсия - вызов функции внутри себя. Подробнее об этом читайте здесь.

То есть рекурсивный setTimeout - это когда метод setTimeout запускает внутри себя еще один или несколько других методов setTimeout.

В чем минус использования метода setInterval?

Допустим, функция выполняется с интервалом в 0,5 секунды.

И представим, что время выполнения самой функции 2 секунды - то есть больше чем интервал в 0,5 секунд.

Таким образом, пока функция выполняется 2 секунды, метод setInterval будет считать, что 0,5 секунды уже прошло, и следующее выполнение скрипта будет происходить сразу после предыдущего - без интервала.

В таких случаях используется рекурсивный вызов setTimeout

JavaScript-код

let id = setTimeout(function log(){
	console.log('Hi');
	id = setTimeout(log, 500);
}, 500);

Результат в Браузере

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



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки