JavaScript MutationObserver.disconnect() — зупинити стеження за DOM

Метод disconnect() припиняє спостереження за всіма вузлами.

правити

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

Крім звичайного прибирання, у нього є критично важлива роль — розрив нескінченного циклу.

Якщо всередині обробника змінювати той самий DOM, за яким стежиш, спостерігач покличе себе знову — і так вічно. Класичний рецепт: перед своїми змінами disconnect(), після — observe() заново.

Незабрані на момент виклику зміни при цьому зникають. Якщо вони потрібні, спершу забери їх через takeRecords().

правити

Порада

Змінюєш DOM усередині обробника — обов'язково обгортай зміни в disconnect() / observe(). Інакше отримаєш вічний цикл.

автор: NagarD правити

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

Переглядачі

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

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

Переглядач
	18	14	6	15	12	11

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

Переглядач
	4.4	18	14	6

Приклади

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

<div id="container"><p>Вміст</p></div>

const container = document.getElementById('container');

function normalize(node) {
    // тут упорядкування DOM — наші власні зміни
}

const observer = new MutationObserver(() => {
    console.log('Зміна ззовні');

    // ВИМИКАЄМО перед власними змінами
    observer.disconnect();

    normalize(container);

    // і вмикаємо назад
    observer.observe(container, { childList: true, subtree: true });
});

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

// провокуємо спостерігача
container.appendChild(document.createElement('span'));