By dakov

2014-07-24 08:26:13 8 Comments

is there a way, how to force mutation observer to ignore DOM changes cause by callback function?

Right now I have:

var config = { attributes: true, childList: true, characterData: true };
var target = document.body;
var timer;

// create an observer instance
var observer = new MutationObserver(function(mutations) {

   // fired when a mutation occurs
   timer = setTimeout(function () {


   }, 500);  


observer.observe(target, config);

Problem is that, _3rd_party_callback callback cause DOM change, so it never stops. As its names says, It's third party function and I can't change (actually its DOM manipulating is its purpose).

So what I do is to disconnect and start observer before and after the function is called in callback, respectively.

  observer.observe(target, config);

It seems to work, but I'm afraid, that thanks to asynchronous handeling of the event I might have observer disabled, when others changes are made and miss them.

It's quite unlikely that there's a way to separate changes from page itself and the callback, but I'll give it a try.


@megawac 2014-07-28 21:18:22

Your idea will work if observer will only observe target and nothing else. It's not a particularly efficent solution as you'll have to set up the hooks again each time you reset the observable but it will work.

observer.observe(target, config);

There is 0 chance that you'll miss an event caused by anything outside of _3rd_party_cb due to all DOM changes occuring in the main event loop. So you disconnect your observer, call the 3rd party code then reconnect it --- there is no step in between for the DOM to change. However if 3rd party code defers a change through, e.g. setTimeout(messupthedom, 0) you'll still pick up these changes in your observable.

Related Questions

Sponsored Content

26 Answered Questions

[SOLVED] How can I tell if a DOM element is visible in the current viewport?

29 Answered Questions

[SOLVED] Remove all child elements of a DOM node in JavaScript

  • 2010-10-17 20:51:00
  • Polaris878
  • 787975 View
  • 806 Score
  • 29 Answer
  • Tags:   javascript dom

26 Answered Questions

[SOLVED] Set a default parameter value for a JavaScript function

41 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 734263 View
  • 2703 Score
  • 41 Answer
  • Tags:   javascript jquery

30 Answered Questions

[SOLVED] How to change an element's class with JavaScript?

  • 2008-10-12 20:06:43
  • Nathan Smith
  • 2510576 View
  • 2682 Score
  • 30 Answer
  • Tags:   javascript html dom

38 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

10 Answered Questions

[SOLVED] How to access the correct `this` inside a callback?

16 Answered Questions

[SOLVED] How do I find out which DOM element has the focus?

  • 2009-01-30 20:21:31
  • Tony Peterson
  • 635750 View
  • 1256 Score
  • 16 Answer
  • Tags:   javascript dom

1 Answered Questions

[SOLVED] Disconnect Mutation Observer from Callback Function

1 Answered Questions

Sponsored Content