Почему функция MutationObserver зацикливается?

Question

[PiggyPig]

Как не пробовал найти более-менее развернутую информацию про MutationObserver находил один и тот же код, по примеру которого выходила полная бредятина, она при этом и зацикливалась, ложа сайт вместе с браузером.

Приведу одну из последних попыток выполнить данный код. Может кто сможет объяснить, что не так-то.
По задумке нужно изначально после загрузки страницы изменить ссылку c "/link" на "/newlink". И постоянно заменять старую на новую в случае, если все собьется и вернется первая.

<ul>
    <li id="change">
        <a href="/link">...</a>
        <div>...</div>
        <div>...</div>
    </li>
    ...
</ul>

var a = document.getElementById('change').children[0];
a.setAttribute('href', '/newlink');

var mObserver = new MutationObserver(function() {
    a.setAttribute('href', '/newlink');
});
if (a.href != '/newlink'){
        mObserver.observe(a, {attributes: true});
}

В любом случае где-то сильно лажаю, так как вместо одноразового выполнения в консоли вижу зацикливание с цифрами переваливающими за тысячи, ну и дальнейшим мертвым зависанием браузера.

Answer 1

[profesor08]

Приведенный код отвратительный. И не удивительно, что он виснет.

Сначала задается значение атрибута href новым значением, а потом проверяется равно ли значение ссылки этому значению. Возможно так задумано, но a.href будет равен "mysite.ru/newlink", а не "/newlink". И скорее всего там должно быть a.getAttribute("href") !== "/newlink".

Поэтому срабатывает условие. Обсервер слушает изменения атрибутов, а функция изменяет те атрибуты, которые слушаются. Тем самым запускает бесконечный цикл вызовов функции обсервера и изменения атрибута.

А еще в html не закрыты теги.

https://jsfiddle.net/vvk6g370/

Comments

[PiggyPig]

Согласен, код соответствует автору)
Нет, не должно быть a.getAttribute.
Попробовал Ваш исправленный вариант и не совсем то, что хотелось получить. В первый раз возвращается новая ссылка, а после дальнейших изменений остается старая. Написав console.log(mutation.oldValue), сначала пишет старую ссылку, а потом уже только новую.

[profesor08]

Это пример на основе документации, и там все работает как надо.
https://jsfiddle.net/vvk6g370/2/

Но мне непонятно удивление, mutation.oldValue, как следует из названия переменной, это и есть старое значение, и там всегда будет только старое. Если старое соответствует новому, то значит заданное новое значение ничем не отличается от старого. Зачем тут ожидать магию - непонятно.

[PiggyPig]

var a = document.getElementsByTagName("a");
a.setAttribute("href", "/newlink");

var mobserver = new MutationObserver(function(mutations) {
  mutations.forEach(function() {
   a.setAttribute("href", "/newlink");
   mobserver.disconnect();
  });    
});

mobserver.observe(a, {
  attributes: true,
  attributeFilter: ["href"]
});

Ну вот сейчас получилось. Если тут еще какие-то замечания выскажете, буду благодарен. Спасибо за помощь!