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

Рассмотрим еще один метод для планирования вызова функции – 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:

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

Результат:

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

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