Планирование вызова функции: setInterval

JavaScript простым языком

Рассмотрим ещё один метод для планирования вызова функции – setInterval.

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

Итак, как и в случае с setTimeout(лучше прочитай о setTimeout, будет намного понятнее), setInterval принимает первым аргументом либо ссылку на функцию, либо функцию, а вторым аргументом передается время в миллисекундах, через которое периодически будет выполняться переданная функция:

function hello() {
   console.log('Привет');
}

setInterval(hello, 3000);

// каждые 3 секунды в консоль будет выводиться сообщение: \
// 'Привет'

Как только потребность в нём пропадает, данный метод лучше всего останавливать.

setInterval, как и setTimeout, возвращает идентификатор, по которому в дальнейшем можно остановить выполнение setInterval:

function hello() {
   console.log('Привет');
}

const intervalId = setInterval(hello, 3000);

// команда ниже остановит выполнение setInterval
clearInterval(intervalId);

Давай попробуем выполнить следующую задачу: с помощью setIntervalвыведем в консоль слово "Привет" 3 раза. Каждое слово должно появляться через секунду после предыдущего.

Код:

let counter = 0;

function hello() {
   console.log('Привет');

   counter += 1;
   
   if (counter === 3) {
      clearInterval(intervalId);
   }
}

const intervalId = setInterval(hello, 1000);

Итак, мы определили функцию hello, которую затем передали в качестве первого аргумента в метод setInterval, вторым аргументом указали время 1000 мс (1 секунда) через которое постоянно нужно запускать функцию hello.

Также мы определили переменную counter (счётчик), которая будет считать количество запусков функции hello (напомню, по условию нам нужно запустить эту функцию только 3 раза).

В самой функции hello:

1. Сначала выводим в консоль слово "Привет";

2. Затем увеличиваем значение счётчика;

3. Строгим сравнением проверяем не равен ли счётчик значению 3. Если условие выполняется, следовательно, слово "Привет" будет выведено 3 раза и далее нам нужно остановить выполнение setInterval, для этого нам поможет метод clearInterval.

Результат:

Перед словом "Привет" стоит цифра 3, это означает, что данная надпись трижды выводилась в консоль (так браузер сворачивает одинаковые значения выводимые в консоль, чтобы уменьшить количество мусора).

Собственно и всё. Задача выполнена. Обязательно повтори ее на практике.