detect variable change in javascript

Question

Hi!

Is it possible to have an event that fires when the value of a certain variable changes? Thanks!

Answer 1

I guess you could use some getter and setter methods for the variable and fire the event there.

Answer 2

Not directly: you need a pair getter/setter with an "addListener/removeListener" interface of some sort... or an NPAPI plugin (but that's another story altogether).

Answer 3

No.

But, if it's really that important, you have 2 options (first is tested, second isn't):

First, use setters and getters, like so:

var myobj = {a : 1};

function create_gets_sets(obj) { // make this a framework/global function
    var proxy = {}
    for ( var i in obj ) {
        if (obj.hasOwnProperty(i)) {
            var k = i;
            proxy["set_"+i] = function (val) { this[k] = val; };
            proxy["get_"+i] = function ()    { return this[k]; };
        }
    }
    for (var i in proxy) {
        if (proxy.hasOwnProperty(i)) {
            obj[i] = proxy[i];
        }
    }
}

create_gets_sets(myobj);

then you can do something like:

function listen_to(obj, prop, handler) {
    var current_setter = obj["set_" + prop];
    var old_val = obj["get_" + prop]();
    obj["set_" + prop] = function(val) { current_setter.apply(obj, [old_val, val]); handler(val));
}

then set the listener like:

listen_to(myobj, "a", function(oldval, newval) {
    alert("old : " + oldval + " new : " + newval);
}

Second, I actually forgot, I'll submit while I think about it :)

EDIT: Oh, I remember :) You could put a watch on the value:

Given myobj above, with 'a' on it:

function watch(obj, prop, handler) { // make this a framework/global function
    var currval = obj[prop];
    function callback() {
        if (obj[prop] != currval) {
            var temp = currval;
            currval = obj[prop];
            handler(temp, currval);
        }
    }
    return callback;
}

var myhandler = function (oldval, newval) {
    //do something
};

var intervalH = setInterval(watch(myobj, "a", myhandler), 100);

myobj.set_a(2);

Answer 4

Yes, object.watch (it's non-standard though). Here's my implementation that works in every current major browser:

// object.watch
if (!Object.prototype.watch)
    Object.prototype.watch = function (prop, handler) {
     var val = this[prop],
     getter = function () {
      return val;
     },
     setter = function (newval) {
      return val = handler.call(this, prop, val, newval);
     };
     if (delete this[prop]) { // can't watch constants
      if (Object.defineProperty) // ECMAScript 5
       Object.defineProperty(this, prop, {
        get: getter,
        set: setter
       });
      else if (Object.prototype.__defineGetter__ && Object.prototype.__defineSetter__) { // legacy
       Object.prototype.__defineGetter__.call(this, prop, getter);
       Object.prototype.__defineSetter__.call(this, prop, setter);
      }
     }
    };

// object.unwatch
if (!Object.prototype.unwatch)
    Object.prototype.unwatch = function (prop) {
     var val = this[prop];
     delete this[prop]; // remove accessors
     this[prop] = val;
    };