Как удалить Mutation Observer?

Question

[G F]

const shittyFunction = (HTMLElement) => {
  const observer = new MutationObserver(() => {})
  observer.observe( HTMLElement, { attributes: true })
}
btn.addEventListener('click', () => {
  shittyFunction(*любой дом элемент*)
})

Каждый раз по клику на кнопку создаётся новый обсервер и добавляется к элементу, а мне надо чтобы старый обсервер заменялся новым. Разумеется каждый раз создаётся новый инстанс. Выносить обсервер из shittyFunction нельзя. каждый последующий вызов shittyFucnction добавляет обсервер к одному и тому же элементу. Теперь вопрос: как можно удалить обсервер, имея ссылку на него?
п.с. пока сделал так (ужасно, знаю), но обсерверы всё равно занимают память.

const observers = []
const shittyFunction = (HTMLElement) => {
  observers.forEach(obs => obs.disconnect())
  observers = []
  const observer = new MutationObserver(() => {})
  observer.observe( HTMLElement, { attributes: true })
  observers.push(observer)
}
btn.addEventListener('click', () => {
  shittyFunction(*любой дом элемент*)
})

Answer 1

[Alex]

Во-первых, у вас присвоение к const

Во-вторых, я бы сделал как-то так:

let observer
function shittyFunction (HTMLElement) {
  if (observer) {
    observer.disconnect()
  }
  
  // Перезаписать старый новым, хоть и не понятно зачем
  observer = new MutationObserver(() => {})
  observer.observe( HTMLElement, { attributes: true })
}

Я не знаю, всей ситуации, но как по мне, тут какие-то архитектурные проблемы

Если по каким-то непонятным причинам вам запрещено выносить observer за пределы shittyFunction, можно использовать WeakMap

const map = new WeakMap()
function shittyFunction (HTMLElement) {
  let observer = map.get(HTMLElement)
  if (observer) {
    observer.disconnect()
  }
  
  // Перезаписать старый новым, хоть и не понятно зачем
  observer = new MutationObserver(() => {})
  observer.observe( HTMLElement, { attributes: true })
  map.set(HTMLElement, observer)
}

А ещё у вас может быть утечка памяти из-за замыкания в callback MutationObserver. Перепроверьте

Comments

[G F]

Да с конст в примере описался. А так спасибо за ответ про weakMap ещё гляну, никогда не юзал. Если бы не было архитектурных проблем я бы за помощью не пришел. Там дикое стадо из костылей, которое я сам создал. Теперь умираю со стыда и заставляю это чудовище работать.

[G F]

А ещё у вас может быть утечка памяти из-за замыкания в callback MutationObserver

И вот это уже "просто" никак не пофиксить, не избавившись от них?

[G F]

И может быть знаете, много ли "весят" ничего не делающие обсерверы?

[Kovalsky]

G F, а зачем много обсерверов в принципе? Если вам известно какие-то элементы будут меняться, то можно абсолютно так же в цикле внутри обсервера их обрабатывать

Answer 2

[Павел Диденко]

Из статьи на learn.javascript "observer.disconnect() – останавливает наблюдение"

Comments

[G F]

апдейт подъехал, интересует как удалить его из памяти

[Kovalsky]

G F, точно так же как и любой другой объект из памяти в js - обрубить все ссылки на него

[Павел Диденко]

G F, после выполнения функции - очищайте и будет вам счастье

[G F]

Kovalsky, логично, то есть то что я написал будет работать?

[Kovalsky]

G F, если вы сможете переприсвоить const observers, то конечно

[Рустам Демонов]

Почему так нельзя?

const shittyFunction = (HTMLElement) => {
  const observer = new MutationObserver(() => {})
  observer.observe( HTMLElement, { attributes: true })
  observer.disconnect()
}
btn.addEventListener('click', () => {
  shittyFunction(*любой дом элемент*)
})

[G F]

Рустам Демонов,
Такая функция ничего не делает.
Kovalsky,
Ну очевидно же там let, просто опечатался