Главная » Работа скриптов через setTimeout и setInterval

Работа скриптов через setTimeout и setInterval


24.04.2021, 22:21
Метод setTimeout()

Чтобы запускать код через заданный промежуток времени (к примеру, спланировать вызов функции), используется метод setTimeout().

Данный метод позволяет вызвать функцию один раз через заданный интервал времени.

Мы можем использовать такой код:

Код

const timerId = setTimeout();

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

Мы помещаем setTimeout() в переменную для того, чтобы у нас была возможность останавливать таймер, когда это будет необходимо.

Например:

Код

const timerId = setTimeout(function() {
  console.log('Hello World');
}, 2000); // => через 2 секунды в консоли выведется Hello World

После интервала можно указывать аргументы для callback-функции:

Код

const timerId = setTimeout(function(text) {
  console.log(text);
}, 2000, 'Hello World'); // => как аргумент передаётся строка с текстом, попадающая в параметр text

Можно передавать готовую функцию:

Код

const timerId = setTimeout(logger, 2000);

function logger() {
  console.log('Hello World');
} // => функцию logger мы передаём в качестве аргумента для метода setTimeout()

А так можно отменить работу счётчика:

Код

const timerId = setTimeout(logger, 2000);

clearTimeout(timerId); /* Обнуляем таймер и дальнейшую работу функции logger */

function logger() {
  console.log('Hello World');
} // => в консоль ничего не выведется

Метод setInterval()

Если нужно, чтобы скрипт выполнялся через заданный интервал времени многократно, применяется метод setInterval().
При этом синтаксис похож на предыдущий метод.

Счётчик при этом обнуляется с помощью clearInterval().

Запуск работы функции через заданный интервал времени можно привязать, например, к кнопке:

Код

const btn = document.querySelector('.btn');
let timerId; /* Объявляем как глобальную переменную, потому как внутри callback-функции эта переменная будет недоступна извне для очистки с помощью clearInterval() */

btn.addEventListener('click', () => {
  timerId = setInterval(logger, 2000); /* Присваиваем значение переменной */
});

function logger() {
  console.log('Hello World');
} // => через каждые 2 секунды в консоль добавляется строка Hello World

Мы можем остановить работу функции с помощью метода clearInterval(), например, после определённого количества её вызовов:

Код

const btn = document.querySelector('.btn');
let timerId;  
let i = 0; /* назначаем переменную-итератор */

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

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

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

Есть один недостаток: если время работы функции logger будет по факту не 2000 мс, а больше, то setInterval не будет ждать задержку в 500 мс, а сразу начнёт выпонять функцию logger следующей итерации.

Для решения подобного рода проблемы используют рекурсивный setTimeOut().

Пример работы:

Код

  let set = setTimeout(function log() {
  console.log('Cообщение');
  set = setTimeout(log, 500);
  }, 500);

В данном коде все выставленные интервалы будут уже строго соблюдены.

Простая анимация с использованием метода setInterval()

Возьмём простую html-структуру, в которой будет присутствовать какая-то кнопка (триггер для начала анимации), блок div (родительский блок, обёртка) и второй блок, меньшего размера, который будет находится внутри родительского:

Код

<button class = "btn">Animation</button>

<div class = "wrapper">
  <div class = "box"></div>
</div>

Пропишем минимальные стили для элементов:

Код

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #e67e22;
}
.wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: #34495e;
}
button {
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100px;
  height: 40px;
  background-color: #3498db;
  color: white;
  border: none;
}

button:hover, button:active {
  background-color: #2980b9;
}

Визуально это выглядит так:


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

Для начала создадим функцию, назовём её boxAnimation

Код

  function boxAnimation() {
  const box = document.querySelector('.box'); /* получили жёлтый квадратик */
  let boxPosition = 0; /* начальное положение квадратика */
  }

Теперь нам необходима функция, которая будет запускаться каждый раз через определённый интервал времени, что и будет создавать анимацию перемещения квадратика:

Код

function boxAnimation() {
  const box = document.querySelector('.box');
  let boxPosition = 0;

  function frame() {
  if (boxPosition == 300) {
  clearInterval();
  } else {
  boxPosition++; /* изменяем начальное значение на 1 */
  box.style.top = boxPosition + 'px'; /* смещаем квадратик на 1px вниз */
  box.style.left = boxPosition + 'px'; /* смещаем квадратик на 1px вправо */
  }
  }
}


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

Теперь остаётся задать таймер, через который будет запускаться наша функция frame:

Код

function boxAnimation() {
  const box = document.querySelector('.box');
  let boxPosition = 0;

  const timer = setInterval(frame, 10); /* задаём интервал запуска для функции frame() */

  function frame() {
  if (boxPosition == 300) {
  clearInterval(timer);
  } else {
  boxPosition++; /* изменяем начальное значение на 1 */
  box.style.top = boxPosition + 'px'; /* смещаем квадратик на 1px вниз */
  box.style.left = boxPosition + 'px'; /* смещаем квадратик на 1px вправо */
  }
  }
}

Если не устанавливать второй аргумент (количество миллисекунд), браузер по умолчанию примет значение в 4 мс

Реализуем запуск анимации при клике на кнопку:

Код

btn.addEventListener('click', boxAnimation);

Посмотреть анимацию

Полезные ссылки:
JavaScript-анимации

КОММЕНТАРИИ (1)

Пример реализации простых цифровых часов в консоли:

Код
let clock = setInterval(() => {
    console.clear();
    console.log(new Date().toLocaleTimeString());
}, 1000);

РЕЙТИНГ МАТЕРИАЛА (0.0 / 0)