Как setInterval работает в Event Loop?

Как setInterval работает в Event Loop?

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

Основное объяснение

// setInterval создает макротаск, повторяющийся каждые N миллисекунд

const intervalId = setInterval(() => {
  console.log('Повторяется каждые 1000ms');
}, 1000);

// Очистка интервала
clearInterval(intervalId);

setInterval НЕ блокирует выполнение кода. Он планирует повторные вызовы в очередь макротасков, и основная программа продолжает работать.

Архитектура Event Loop и место setInterval

ЕVENT LOOP (бесконечный цикл):

┌─────────────────────────────────────────┐
│  Call Stack (стек вызовов)              │
│  Синхронный код выполняется здесь       │
└─────────────────────────────────────────┘
              ↓
┌─────────────────────────────────────────┐
│  Microtask Queue (очередь микротасков)  │
│  - Promise.then()                       │
│  - MutationObserver                     │
│  - queueMicrotask()                     │
└─────────────────────────────────────────┘
              ↓
┌─────────────────────────────────────────┐
│  Macrotask Queue (очередь макротасков)  │
│  - setTimeout()          <- setInterval │
│  - setInterval()         <- ЗДЕСЬ       │
│  - requestAnimationFrame()              │
│  - I/O операции                        │
│  - UI события                          │
└─────────────────────────────────────────┘

Как setInterval интегрируется в Event Loop

// Пример 1: Базовая работа setInterval

console.log('START');

const intervalId = setInterval(() => {
  console.log('INTERVAL CALL');
}, 1000);

console.log('END');

// Вывод:
// START
// END
// (через 1000ms) INTERVAL CALL
// (через 2000ms) INTERVAL CALL
// (через 3000ms) INTERVAL CALL
// ...

// setInterval НЕ блокирует выполнение, код продолжает работать

Пошаговое объяснение:

1. console.log('START') выполняется синхронно
2. setInterval() планирует повторный вызов в очередь макротасков (не выполняет сейчас)
3. console.log('END') выполняется синхронно
4. После 1000ms Event Loop берет первый макротаск из очереди
5. Выполняется callback функция
6. setInterval автоматически добавляет следующий вызов в очередь

Детальная временная шкала

console.log('Начало');

setInterval(() => {
  console.log('Интервал 1000ms');
}, 1000);

Promise.resolve().then(() => {
  console.log('Микротаск');
});

console.log('Конец');

// ВЫПОЛНЕНИЕ:
// 0ms:    "Начало"        (синхронно)
// 0ms:    "Конец"         (синхронно)
// 0ms:    "Микротаск"     (микротаск, выполняется сразу после синхрона)
// 1000ms: "Интервал 1000ms" (макротаск)
// 2000ms: "Интервал 1000ms" (макротаск)
// 3000ms: "Интервал 1000ms" (макротаск)

setInterval vs setTimeout

// setTimeout — одноразовый макротаск
setTimeout(() => {
  console.log('Выполнится один раз через 1000ms');
}, 1000);

// setInterval — повторяющийся макротаск
setInterval(() => {
  console.log('Выполнится каждые 1000ms');
}, 1000);

// Эквивалент setInterval через setTimeout
function myInterval(callback, delay) {
  function schedule() {
    callback();
    setTimeout(schedule, delay);
  }
  return setTimeout(schedule, delay);
}

Взаимодействие с микротасками

// ВАЖНО: Все микротаски выполняются ДО следующего макротаска

console.log('1');

setTimeout(() => {
  console.log('6. setTimeout');
  
  Promise.resolve().then(() => {
    console.log('7. Микротаск после setTimeout');
  });
}, 0);

Promise.resolve()
  .then(() => {
    console.log('2. Микротаск 1');
    
    return Promise.resolve();
  })
  .then(() => {
    console.log('3. Микротаск 2');
  });

console.log('4');

setInterval(() => {
  console.log('8. setInterval');
}, 0);

console.log('5');

// Вывод:
// 1     (синхронно)
// 4     (синхронно)
// 5     (синхронно)
// 2     (микротаск)
// 3     (микротаск)
// 6     (макротаск: setTimeout)
// 7     (микротаск после setTimeout)
// 8     (макротаск: setInterval)
// 8     (макротаск: setInterval повторяется)
// ...

Проблемы и граничные случаи

1. Интервал медленнее, чем расчетный период

// Если callback выполняется дольше, чем интервал
setInterval(() => {
  // Эта работа занимает 1500ms
  console.log('Начало работы');
  
  // Имитация длительной операции
  const start = Date.now();
  while (Date.now() - start < 1500) {}
  
  console.log('Конец работы');
}, 1000);

// Результат:
// 0ms:    Начало работы
// 1500ms: Конец работы
// 1500ms: Начало работы (setInterval не ждет, он просто добавляет в очередь)
// 3000ms: Конец работы
// 3000ms: Начало работы
// ...

// setInterval НЕ пропускает вызовы, а выполняет их подряд

2. Утечка памяти

// ПЛОХО: забыли очистить интервал
function startPolling() {
  setInterval(() => {
    fetch('/api/data');
  }, 5000);
  // Интервал никогда не очищается!
}

startPolling();
startPolling();
startPolling();
// Теперь есть 3 интервала, работающих параллельно!

// ХОРОШО: сохраняем ID и очищаем
class Poller {
  constructor() {
    this.intervalId = null;
  }
  
  start() {
    this.intervalId = setInterval(() => {
      fetch('/api/data');
    }, 5000);
  }
  
  stop() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}

const poller = new Poller();
poller.start();
poller.stop(); // Всегда очищаем

3. requestAnimationFrame вместо setInterval для анимаций

// ПЛОХО: setInterval для анимаций
let position = 0;
setInterval(() => {
  position += 1;
  element.style.left = position + 'px';
}, 16); // ~60 FPS

// ХОРОШО: requestAnimationFrame
function animate() {
  position += 1;
  element.style.left = position + 'px';
  
  if (position < 100) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);
// rAF синхронизируется с монитором браузера
// Если вкладка в фоне, вызовы пропускаются автоматически

Практические примеры

1. Polling с обработкой ошибок

class APIPoller {
  constructor(url, interval = 5000) {
    this.url = url;
    this.interval = interval;
    this.intervalId = null;
  }
  
  start() {
    this.intervalId = setInterval(async () => {
      try {
        const response = await fetch(this.url);
        const data = await response.json();
        console.log('Data:', data);
      } catch (error) {
        console.error('Polling error:', error);
        // Ошибка в одном цикле не останавливает интервал
      }
    }, this.interval);
  }
  
  stop() {
    clearInterval(this.intervalId);
    this.intervalId = null;
  }
}

const poller = new APIPoller('/api/status', 3000);
poller.start();

// Очистка при необходимости
window.addEventListener('beforeunload', () => {
  poller.stop();
});

2. React компонент с setInterval

import { useEffect, useState } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    // setInterval планируется при монтировании
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    
    // ВАЖНО: очистка при размонтировании
    return () => clearInterval(intervalId);
  }, []);
  
  return <div>Секунды: {seconds}</div>;
}

3. Адаптивный интервал

function adaptivePolling() {
  let interval = 1000; // Начинаем с 1 секунды
  let failures = 0;
  
  const intervalId = setInterval(async () => {
    try {
      const response = await fetch('/api/data');
      if (response.ok) {
        failures = 0;
        interval = 1000; // Вернуться к базовому интервалу
      }
    } catch (error) {
      failures++;
      // Экспоненциально увеличиваем интервал при ошибках
      interval = Math.min(1000 * Math.pow(2, failures), 30000);
      clearInterval(intervalId);
      // Перестартуем с новым интервалом
      setTimeout(adaptivePolling, interval);
    }
  }, interval);
}

Визуализация Event Loop с setInterval

Время ──────────────────────────────────────────>

0ms   Call Stack
      ├─ console.log('START')
      ├─ setInterval() [добавляет макротаск в очередь]
      └─ console.log('END')
      
      Microtask Queue: пусто
      Macrotask Queue: [INTERVAL_CALL @ 1000ms]

1000ms Call Stack: пусто (синхронный код завершен)
       Event Loop берет макротаск
       
       ├─ INTERVAL_CALL
       │  └─ console.log('INTERVAL')
       └─ setInterval добавляет новый вызов @ 2000ms
       
       Macrotask Queue: [INTERVAL_CALL @ 2000ms]

2000ms Повторение процесса...

Заключение

setInterval в Event Loop:

1. Тип: Макротаск (более низкий приоритет, чем микротаски)
2. Асинхронность: Не блокирует выполнение кода
3. Повторение: Автоматически добавляется в очередь после каждого вызова
4. Точность: НЕ гарантирует точный интервал (может быть больше)
5. Очистка: ВСЕГДА очищайте с помощью clearInterval()
6. Альтернативы: requestAnimationFrame для анимаций, setTimeout для одноразовых действий

Понимание того, как setInterval взаимодействует с Event Loop, критично для написания предсказуемого, эффективного и безопасного по памяти кода.