在不损失性能的情况下观察DOM更改（javascript）

Question

这可能是一个新手问题。我想要做的是观察一个特定元素是否有自定义滚动条我想改变其父级的宽度。如果我将setInterval包装起来，因为它将一直检查更改，但是我很关心性能。如何在jQuery甚至Angularjs中更优雅地实现它？

(function($) {
  $.fn.hasScrollBar = function() {
    return this.get(0).scrollHeight > this.height();
  }
})(jQuery);
   if ($('#tab-content-3').hasScrollBar()) {
      $('#basics md-content').css('width', '95%');
   } else {
      $('#basics md-content').css('width', '100%');
   }

Answer 1

您可以使用MutationObserver。大多数现代浏览器都支持此功能，旧版浏览器也有后备支持。

查看以下示例和MutationObserver支持的各种配置。我建议将MutationObserver与attributes更改配置一起使用，以便最大限度地降低性能影响。

MDN MutationObserver

Example Tutorial by Google

Similar Stackoverflow Answer

Underscore.js's throttle

您可以将它与underscore.js的节流方法一起使用以提高性能。