ошибка наблюдателя мутации в зависимости от версии Chrome - PullRequest
Новая
       22

ошибка наблюдателя мутации в зависимости от версии Chrome

0 голосов
/ 18 февраля 2019

Я использую наблюдатель мутации, чтобы синхронизировать ширину двух делителей при перетаскивании одного (для изменения размера) в Планировщике FullCalendar.

Я использую версию Chrome: 72.0.3626.109 и всеза работой.Однако, когда я пытаюсь установить версию ниже 72.0.36, это вызывает ошибку в моем приложении.

Но наблюдатель мутаций, похоже, работает некоторое время ... Кроме того, он, похоже, не работает накрай.

Вот код;возможно, я делаю что-то не так: 

unifyResourceAreaResize: function() {
   var target = $(".fc-resource-area");
   var observer = new MutationObserver(function(mutations) {
      target.width(mutations[0].target.offsetWidth);
   });
   for (var i = 0; i < target.length; i++) {
      observer.observe(target[i], { 
         attributes: true, 
         childList: true, 
         characterData: true 
      });
   }
}

Вот проблема codePen CodePen

Всего 4 .fc-resource-area, планировщик fullcalendar имеет2 элемента (заголовок ресурса и список ресурсов), и у меня всего 2 календаря.Вот почему я пытаюсь синхронизировать изменение размера столбцов ресурсов обоих календарей.

Спасибо за помощь.

1 Ответ

0 голосов
/ 18 февраля 2019

Проблемы в вашем коде:

  • запись того же значения в атрибут DOM вызовет наблюдателя, так что он вращается в бесконечном цикле, и страница останавливается.
  • [просматривая полный код на codepen] eventAfterAllRender, возможно, каждый раз вызывает вашу функцию unifyResourceAreaResize, так что новый наблюдатель мутации регистрируется в дополнение к старому, например, если фактический DOM не был изменен.

Решение:

  • Объявить наблюдателя только один раз.
  • Использовать автоматически заполненный document.getElementsByClassName вместо jQuery.
  • Пропустить обновление ширины, еслиразница составляет менее 1 пикселя.
  • Нет необходимости соблюдать childList или поддерево, все, что вам нужно, это атрибут style (см. дополнительные советы ). 
var targets = document.getElementsByClassName("fc-resource-area");
var observer = new MutationObserver(function (mutations) {
  var width = parseFloat(mutations[0].target.style.width);
  Array.prototype.forEach.call(targets, function (el) {
    if (Math.abs(parseFloat(el.style.width) - width) >= 1) {
      el.style.width = width + 'px';
    }
  });
});

function unifyResourceAreaResize() {
  for (var i = 0; i < targets.length; i++) {
    observer.observe(targets[i], {
      attributes: true,
      attributeFilter: ['style'],
    });
  }
}

PS Если вы откроете devtools перед запуском кода, вы можете нажать кнопку «Пауза» на панели «Источники» при замораживании страницы, что приостановит код в devtools, чтобы вы моглии осмотреть его.

...