突变观察者错误取决于镀铬版

Question

我正在使用突变观察者在拖动（调整大小）的情况下，在FullCalendar Scheduler中同步两个Divs的宽度。

我正在使用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个日历。这就是为什么我试图同步两个日历资源列调整大小的原因。

感谢您的帮助。

Answer 1

代码中的问题：

• 将相同的值编写给DOM属性会触发观察者，因此它在无限的周期中旋转，页面冻结。
• [查看codepen上的完整代码] eventAfterAlrrender可能每次都会调用您的unifyResourCoreareareAreareSize函数，因此除了旧的DOM''''t改变了。

解决方案：

• 仅声明观察者一次。
• 使用自动填充的document.getElementsByClassName而不是jQuery。
• 如果差异小于1px，则跳过更新宽度。
• 无需观察孩子清单或子树，您需要的只是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'],
    });
  }
}

P.S。如果您在运行代码之前打开DevTools，则可以在页面冻结时单击源面板中的暂停按钮，该页面将在DevTools中暂停代码，因此您可以对其进行检查。