Метод render

Функция render предназначена для работы с DOM: она считывает атрибут datetime у переданных элементов, вычисляет относительное время и записывает строку в textContent. В отличие от format, render создаёт внутренние таймеры и автоматически обновляет элементы.

Сигнатура

render(
  nodes: Element | NodeList | Element[] | HTMLCollectionOf<Element>,
  locale?: string
): void

Параметры

nodes — один или несколько DOM-элементов. Принимает:

  • Element — один элемент
  • NodeList — результат querySelectorAll
  • HTMLCollection — результат getElementsByClassName
  • Array<Element> — массив элементов

locale — необязательная строка локали. По умолчанию — 'en_US'.

HTML-разметка

Функция render работает только с атрибутом datetime. Рекомендуется использовать тег <time>:

<time datetime="2025-05-26T10:00:00Z"></time>

Значение datetime должно быть ISO 8601 или другим форматом, который корректно парсится new Date().

Базовый пример

import { render } from 'timeago.js';

const nodes = document.querySelectorAll('time[datetime]');
render(nodes, 'ru');

После вызова все элементы получат текст вида “4 часа назад” и будут автоматически обновляться.

Один элемент

import { render } from 'timeago.js';

const el = document.getElementById('post-time');
render(el, 'ru');

Несколько наборов с разными локалями

import { render } from 'timeago.js';

render(document.querySelectorAll('.ru-time'), 'ru');
render(document.querySelectorAll('.en-time'), 'en_US');
render(document.querySelectorAll('.de-time'), 'de');

Первичное обновление

render немедленно обновляет textContent при первом вызове. Это синхронная операция — изменения видны сразу.

Автоматические обновления

После первичного обновления render планирует последующие через адаптивные интервалы:

  • Секунды — раз в ~10 секунд
  • Минуты — раз в минуту
  • Часы — раз в час
  • Дни и более — раз в день

Это оптимизирует нагрузку: элемент “3 года назад” не обновляется каждые 10 секунд.

Внутренний механизм

При вызове render(node, locale):

  1. Читается node.getAttribute('datetime').
  2. Вычисляется относительное время через внутренний аналог format.
  3. Результат записывается в node.textContent.
  4. Планируется следующее обновление через setTimeout.

Таймер хранится в WeakMap, привязанной к DOM-элементу. Это предотвращает утечки памяти при удалении элемента.

Обновление при добавлении новых элементов

import { render } from 'timeago.js';

function addPost(post) {
  const li = document.createElement('li');
  li.innerHTML = `<time datetime="${post.createdAt}"></time>`;
  document.getElementById('list').appendChild(li);

  render(li.querySelector('time'), 'ru');
}

Новый элемент подключается к системе автообновления сразу.

render и SSR

В среде без DOM (Node.js, Deno) вызов render вызовет ошибку, так как функция работает с Element. Для SSR использовать только format.

Остановка обновлений

После завершения работы с элементами нужно вызвать cancel:

import { render, cancel } from 'timeago.js';

const nodes = document.querySelectorAll('.time');
render(nodes, 'ru');

// При уничтожении компонента
cancel(nodes);

Без cancel таймеры продолжают работать даже после удаления элементов.

render в жизненном цикле компонента

React:

import { useEffect, useRef } from 'react';
import { render, cancel } from 'timeago.js';

function TimeLabel({ date }: { date: string }) {
  const ref = useRef<HTMLTimeElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    render(ref.current, 'ru');
    return () => cancel(ref.current!);
  }, [date]);

  return <time ref={ref} dateTime={date} />;
}

Vue:

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { render, cancel } from 'timeago.js';

const props = defineProps({ date: String });
const el = ref(null);

onMounted(() => render(el.value, 'ru'));
onBeforeUnmount(() => cancel(el.value));
</script>

<template><time ref="el" :datetime="date" /></template>

Обработка пустого NodeList

const nodes = document.querySelectorAll('.nonexistent-class');
render(nodes, 'ru'); // ничего не происходит — пустая коллекция

render безопасно обрабатывает пустые коллекции.

render vs format: когда что использовать

Сценарий Метод
Разовое форматирование format
Статичный шаблон / SSR format
Автообновление в браузере render
Компонент с lifecycle-управлением render
Большой список без автообновления format
Оглавление