Далее на странице...
- Метод setTimeout - Синтаксис - 2 аргумента Запускает функцию один раз через заданный промежуток времени
- Метод setTimeout - 3-ий аргумент 3-ий аргумент - аргумент для внутренней функции
- setTimeout - Аргумент функция Метод setTimeout принимает функцию - НЕ вызывает её Функция вызывается - по истечении указанного времени
- Метод clearInterval - Остановка скрипта Отменить выполнение скрипта Аргумент - идентификатор скрипа/переменная
- Метод setInterval + Запуск скрипта по событию SetInterval - запускает функцию регулярно и по событию
- Метод setInterval - Простая JS-анимация
- Рекурсивный setTimeout Рекурсивный setTimeout лучше, чем setInterval Рекурсия - вызов функции внутри себя
Функции в 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);
}
}
Результат в Браузере
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);
Результат в Браузере
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.
Допустим, функция выполняется с интервалом в 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, только в данном случае указанный интервал будет соблюдаться всегда - независимо от того, сколько времени уходит на выполнение функции.
