监听JavaScript中的变量更改
监听JavaScript中的变量更改
提问于 2009-11-19 07:58:15
有没有可能在JS中有一个当某个变量的值发生变化时触发的事件？接受JQuery。
回答 18
Stack Overflow用户
发布于 2016-05-24 09:46:20
是的，这现在是完全可能的！
我知道这是一个很老的线程，但是现在可以使用访问器(getter和setter)实现这种效果：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters
您可以像这样定义一个对象，其中aInternal表示字段a
x = {
aInternal: 10,
aListener: function(val) {},
set a(val) {
this.aInternal = val;
this.aListener(val);
},
get a() {
return this.aInternal;
},
registerListener: function(listener) {
this.aListener = listener;
}
}然后，您可以使用以下内容注册监听程序：
x.registerListener(function(val) {
alert("Someone changed the value of x.a to " + val);
});因此，只要x.a的值发生变化，侦听器函数就会被触发。运行以下代码行将弹出警报：
x.a = 42;请看这里的示例：https://jsfiddle.net/5o1wf1bn/1/
您还可以使用监听器数组，而不是单个监听器插槽，但我想给您一个尽可能简单的示例。
Stack Overflow用户
发布于 2009-11-19 08:07:45
不是的。
但是，如果它真的那么重要，你有两个选择(第一个是测试的，第二个不是)：
首先，使用setter和getter，如下所示：
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);然后，您可以执行以下操作：
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));
}然后设置侦听器，如下所示：
listen_to(myobj, "a", function(oldval, newval) {
alert("old : " + oldval + " new : " + newval);
}其次，您可以对值进行监视：
给出上面的myobj，上面有'a‘：
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);Stack Overflow用户
发布于 2015-05-20 20:34:35
使用Prototype：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
// Console
function print(t) {
var c = document.getElementById('console');
c.innerHTML = c.innerHTML + '<br />' + t;
}
// Demo
var myVar = 123;
Object.defineProperty(this, 'varWatch', {
get: function () { return myVar; },
set: function (v) {
myVar = v;
print('Value changed! New value: ' + v);
}
});
print(varWatch);
varWatch = 456;
print(varWatch);<pre id="console">
</pre>
其他示例
// Console
function print(t) {
var c = document.getElementById('console');
c.innerHTML = c.innerHTML + '<br />' + t;
}
// Demo
var varw = (function (context) {
return function (varName, varValue) {
var value = varValue;
Object.defineProperty(context, varName, {
get: function () { return value; },
set: function (v) {
value = v;
print('Value changed! New value: ' + value);
}
});
};
})(window);
varw('varWatch'); // Declare
print(varWatch);
varWatch = 456;
print(varWatch);
print('---');
varw('otherVarWatch', 123); // Declare with initial value
print(otherVarWatch);
otherVarWatch = 789;
print(otherVarWatch);<pre id="console">
</pre>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1759987
复制相关文章
相似问题