10

Is there a way in JavaScript to have something like an event that listens to changes in a variable? so when its value is modified the event triggers and then I can call a function. To put this more into context I have a function which handles the html rendering of an array of objects, and I want that function to be called automatically every time the array is modified.

Thanks.

VerizonW
  • 1,585
  • 5
  • 19
  • 27
  • `setters` are 'helpers' which can parse the variable to be set first. Not sure what possibilities and what level of control you have over your code, but in the setter you can call the function. – pimvdb Mar 12 '11 at 12:40

5 Answers5

7

Use object.watchdocs and if it is not supported natively look at this implementation: Object.watch() for all browsers?

Community
  • 1
  • 1
Gabriele Petrioli
  • 173,972
  • 30
  • 239
  • 291
  • 6
    Note the watch method is deprecated: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch – Adam Fratino Dec 12 '17 at 20:02
6

I don't think what you ask is possible.

A solution might be to :

  • encapsulate your data into a specific object
  • access that data using a setter method of that object
  • have that setter method both :
    • set the data
    • call your function

But it'll require you to rewrite a bit of your code.

Pascal MARTIN
  • 374,560
  • 73
  • 631
  • 650
  • Thats the easyiest way to do this i think as well. Maybe some frameworks have capabilities like that as well. – Chris Mar 12 '11 at 12:41
2

In ECMAScript 5 there are getter/setter properties... Read here: http://ejohn.org/blog/ecmascript-5-objects-and-properties/

Non-IE browsers support something similar:

http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

For IE, you'll have to wait for IE9, or use only DOM-bases getters/setters.

xanatos
  • 102,557
  • 10
  • 176
  • 249
1

You could use setInterval to check for its value so many times a second, and save it into a separate variable. You can check each time whether the real variable is different from the other one. In that case, call the function.

It's a dirty trick, though.

pimvdb
  • 141,012
  • 68
  • 291
  • 345
  • +1 it's dirty, as you say. Not at all nice. But with no other options, in the right scenario, it may just work :) – Rob Levine Mar 12 '11 at 12:46
  • um .. I guess this would work in smaller applications if you really want ugly and potentially buggy code .. for there is still a small window where the variable is a "new" value but the function has not been run, which, I should expect, would create bugs in certain scenarios. This method, all in all, shouldn't be favored, if you couldn't tell, Mr./Ms. casual observer, who may or may not be reading this comment. I'd just recommend making an object like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype and using getter/setter functions. – dylnmc Oct 25 '17 at 16:05
1

Because JavaScript doesn't universally support setter/getter methods yet, I'd recommend you think about how you set your variables. One technique that would work is:

Array.prototype.setMember = function(index,newValue) {
    alert("I will perform some action here");
    this[index] = newValue;
}

var myArray = [1,2,3];
// x[0] = 11; // Don't do this any more
x.setMember(0,11);
alert(x[0]);

I'm personally not a huge fan of adding new methods to base prototypes, but it makes things easier to refactor in the short term.

Andrew
  • 12,936
  • 13
  • 52
  • 102
  • yes, this is probably easier and better than making an entirely new object if you just need to do this with an Array for instance. Good thinking – dylnmc Oct 25 '17 at 16:15