监视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

Google的示例教程

类似的Stackoverflow答案

Underscore.js的油门

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