Home » Javascript » Object.watch() for all browsers?

Object.watch() for all browsers?

Posted by: admin November 30, 2017 Leave a comment

Questions:

I was looking for an easy way to monitor an object or variable for changes, and I found Object.watch(), that’s supported in Mozilla browsers, but not IE. So I started searching around to see if anyone had written some sort of equivalent.

About the only thing I’ve found has been a jQuery plugin, but I’m not sure if that’s the best way to go. I certainly use jQuery in most of my projects, so I’m not worried about the jQuery aspect…

Anyway, the question: Can someone show me a working example of that jQuery plugin? I’m having problems making it work…

Or, does anyone know of any better alternatives that would work cross browser?

Update after answers:

Thanks everyone for the responses! I tried out the code posted here:
http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

But I couldn’t seem to make it work with IE. The code below works fine in Firefox, but does nothing in IE. In Firefox, each time watcher.status is changed, the document.write() in watcher.watch() is called and you can see the output on the page. In IE, that doesn’t happen, but I can see that watcher.status is updating the value, because the last document.write() call shows the correct value (in both IE and FF). But, if the callback function isn’t called, then that’s kind of pointless… 🙂

Am I missing something?

var options = {'status': 'no status'},
watcher = createWatcher(options);

watcher.watch("status", function(prop, oldValue, newValue) {
  document.write("old: " + oldValue + ", new: " + newValue + "<br>");
  return newValue;
});

watcher.status = 'asdf';
watcher.status = '1234';

document.write(watcher.status + "<br>");
Answers:

(Sorry for the cross-posting, but this answer I gave to a similar question works fine here)

I have created a small object.watch shim for this a while ago. It works in IE8, Safari, Chrome, Firefox, Opera, etc.

Questions:
Answers:

That plugin simply uses a timer/interval to repeatedly check for changes on an object. Maybe good enough but personally I would like more immediacy as an observer.

Here’s an attempt at bringing watch/unwatch to IE: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html.

It does change the syntax from the Firefox way of adding observers. Instead of :

var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

You do:

var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

Not as sweet, but as an observer you are notified immediately.

Questions:
Answers:

Update for late 2015

Object.observe() is now cancelled. Sorry people!

Update for 2015

Use Object.observe() from ES7.

Here’s a polyfill.

Questions:
Answers:

Note that in Chrome 36 and higher you can use Object.observe as well. This is actually a part of a future ECMAScript standard, and not a browser-specific feature like Mozilla’s Object.watch.

Object.observe only works on object properties, but is a lot more performant than Object.watch (which is meant for debugging purposes, not production use).

var options = {};

Object.observe(options, function(changes) {
    console.log(changes);
});

options.foo = 'bar';

Questions:
Answers:

you can use Object.defineProperty.

watch the property bar in foo

Object.definedProperty(foo, "bar", {
  get: function (val){
    //some code to watch the getter
  },

  set: function (val) {
    //some code to watch the setter
  }
})

Questions:
Answers:

I found two people which claim to have solved this problem:

Crossbrowser Object watch (claims support for IE, Opera, Safari)

watch() Missing JS Function in IE with use of prototype.js for IE (? Opera, Safari ?)

Questions:
Answers:

I also think that right now the best solution is to use Watch.JS, find a nice tutorial here: Listen/Watch for object or array changes in Javascript (Property changed event on Javascript objects)