admin管理员组

文章数量:1178553

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.

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.

Share Improve this question edited Apr 16, 2021 at 17:23 Syscall 19.8k10 gold badges43 silver badges57 bronze badges asked Oct 12, 2009 at 16:20 scottscott
Add a comment  | 

8 Answers 8

Reset to default 22

(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;
}

本文标签: jqueryonchange javascript variableStack Overflow