JavaScript MutationObserver.takeRecords() — забрати накопичені зміни

Метод takeRecords() віддає зміни, які ще не потрапили в обробник, і очищає чергу.

правити

Загальний опис

Спостерігач збирає зміни пачками й викликає обробник не миттєво, а трохи згодом. Тому в черзі завжди може щось лежати.

І саме тут ховається втрата: disconnect() цю чергу викидає. Якщо зміни, що не встигли долетіти, важливі — забери їх через takeRecords() перед відключенням.

Другий випадок — коли треба обробити зміни синхронно, просто зараз, не чекаючи на планувальник.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
takeRecords	26+	14+	7+	15+	12+	11+

Підтримка: мобільні переглядачі

Переглядач
takeRecords	4.4+	yes	yes	7+

Приклади

+ запропонувати свій приклад у пісочниці

<div id="watched">Елемент</div>

const container = document.getElementById('watched');
const observer = new MutationObserver(() => {});

observer.observe(container, { childList: true });

container.appendChild(document.createElement('span'));

// disconnect() викине чергу — спершу забираємо накопичене
const pending = observer.takeRecords();
console.log('Накопичилось змін:', pending.length);

observer.disconnect();