onchange javascript variable

Is开发者_如何转开发 there a way to call a JavaScript function if a javascript variable changes values using jQuery?

Something to the extend of -

var test = 1;
test = 2; // calls a javascript function
test = 3; // calls a javascript function

This way I wouldn't have to add an onchange event to so many different functions.

---

(Something seems a bit carelessly planned in your code if you need functionality like that)

The easiest way to add that feature is to create a function for updating your variable, that also calls whatever other function you want to.

Instead of:

var test = 1;
test = 2; // calls a javascript function
test = 3; // calls a javascript function

You do:

var test = 1;

function set_test(newval) {
  test = newval;
  my_callback(); // this is whatever you wanted to call onChange
}

set_test(2);
set_test(3);

---

try this, it's real variable change event:

var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function(){
        return this._year;
    },
    set: function(newValue){
        this._year=newValue;
        this.edition=newValue-2004;
        alert(this._year);
        alert(this.edition);
    }
});

book.year=2017
// will alert 2017 and 13

---

No, there is not, just polling with setInterval or setTimeout or callbacks. Events only apply to DOM. I'd suggest that you try to go with callbacks and do things like this:

function foo(data, callback)
{
    // do things with data
    callback(data);
}

function bar(data)
{
    console.log('callback can has', data);
}

foo('baz', bar);

It's a rough example, but should give you the idea.

---

One option is to wrap your data into a heavier object.

var Watching = function(){
    var a;

    this.getA(){
        return a;
    };

    this.setA(value){
        a = value;
        this.trigger('watch');
    };

    his.watchA(callback){
        this.bind('watch', callback);
    };
};

var obj = new Watching();
obj.watchA(function(){ alert('changed'); });
obj.setA(2);

---

This doesn't answer your question exactly, but it may solve your problem: make your variable as html content of an element, then use jQuery change() event

<script>
document.write("<div id='test'>"+test+"</div>";
$("#test").change(function(){//your script here});
</script>

---

You can create a class to be notified when your variable changed. this is the class:

class ListeningVariable {
    constructor(val, changeHandler) {
        this.val = val;
        this.changeHandler = changeHandler
    }
    set value(val) {
        if (this.val !== val) {
            this.changeHandler(val);
        }
        this.val = val;
    }
    changeHandler(val) {}
}

Then you can create an instance of this class instead of your variable:

let myVar = new ListeningVariable(25/*initialize*/, function(val) {
    console.log("variable Changed to:", val);
}/*handler function*/);

And when you want to change your variable, just use this code:

myVar.value = 20; // calls the changeHandler function
myVar.value = 20; // does't call the changeHandler function
myVar.value = 40; // calls the changeHandler function

---

You can do something like this with setting intervals to keep track of change:

var dataToChange = 1;
var key = dataToChange;
var int = setInterval(() => {
    if (dataToChange != key) {
        console.log('changed'); /// if data changes
        clearInterval(int);
    } else {
        console.log('nothing changed'); /// while nothing changes
    }
}, 3000);
setTimeout(() => {
    ///// supposedly this is when the variable changes
    dataToChange = 2;
}, 9000);

---

The below function will poll for changes in the test variable every 5 seconds:

// initialize test variable globally
var test = 1;

// global variable to store the previous value of test
// which is updated every 5 seconds
var tmp = test;

setInterval("pollForVariableChange()", 5000);

function pollForVariableChange() {
    if (tmp != test) {
        alert('Value of test has changed to ' + test);
    }
    tmp = test;
}