Таймерное изменение текста в элементе

Условие

Необходимо создать функцию, которая каждые две секунды заменяет содержимое заданного HTML‑элемента на следующий элемент из переданного массива строк и автоматически прекращает работу спустя десять секунд.

/**
 * Требуется написать функцию, которая обновляет
 * текст элемента следующим элементом массива
 * каждые 2 секунды, и останавливается через 10 секунд
 */
function updateTextEveryTwoSeconds(elementId, texts) {
}

// Пример использования
updateTextEveryTwoSeconds("content", [
  "Hello world 1",
  "Hello world 2",
  "Hello world 3",
  "Hello world 4",
  "Hello world 5",
]);

Ответ

Запланируйте пять обновлений на 2, 4, 6, 8 и 10 секунд. При коротком массиве можно повторять строки циклически; точность времени ограничена event loop.

function updateTextEveryTwoSeconds(elementId, texts) {
  const element = document.getElementById(elementId);
  if (!element || texts.length === 0) return () => {};
  const timers = [];
  for (let step = 1; step <= 5; step++) {
    timers.push(setTimeout(() => {
      element.textContent = texts[(step - 1) % texts.length];
    }, step * 2000));
  }
  return () => timers.forEach(clearTimeout);
}

Первое значение появляется через две секунды, последнее — на десятисекундной отметке, после чего новых обновлений нет. Возвращённая функция позволяет отменить оставшиеся таймеры. Это номинальное расписание: если поток заблокирован, callbacks выполнятся позже. textContent вставляет обычный текст, не исполняя HTML из массива.