如何在每次变量更改时运行 JavaScript 中的函数？

Question

JavaScript 中有没有一种方法可以让事件类似于监听变量的变化？因此，当它的值被修改时，事件就会触发，然后我就可以调用函数了。为了更详细地说明这一点，我有一个函数来处理对象数组的 HTML 渲染，并且我希望每次修改数组时都会自动调用该函数。

Answer 1

使用

object.watch

^docs，如果本机不支持，请查看此实现：Object.watch() 适用于所有浏览器？

Answer 2

我认为你的要求是不可能的。

解决方案可能是：

• 将数据封装到特定对象中
• 使用该对象的 setter 方法访问该数据
• 同时具有该 setter 方法：
  • 设定数据
  • 调用你的函数

但是它需要您重写一些代码。

Answer 3

现在可以使用Proxy对象，请参阅我对类似问题的回答中的演示这里。

可以为数组创建代理，请参阅下面的代码片段。对于您的情况，只需将 console.log 替换为您的 DOM 修改方法即可。但要小心：向数组添加值会修改数组长度，这可能会多次调用代理，并且使用

push()

等方法修改数组可能会产生其他副作用，从而更多地调用代理。这取决于 UA 实现，但应保证每次修改至少有一次 Proxy 调用。

const ProxyArr = (arr, fn) => new Proxy(arr, {
    get: (arr, key) => arr[key],
    set: (arr, key, val) => fn(arr[key] = val, key, arr) || 1
});


// listen to array changes
let handler = (v, k, a) => console.log(`setting ${v} at ${k} (${a.length} items)`);
let arr = [];
let proxy = ProxyArr(arr, handler);

// test (see the console output)
proxy[0] = "aa";
proxy.push("bb");
console.log(arr);
console.log(proxy);

Answer 4

您可以使用

setInterval

每秒多次检查其值，并将其保存到单独的变量中。您可以每次检查实际变量是否与其他变量不同。在这种情况下，请调用该函数。

不过，这是一个肮脏的伎俩。

Answer 5

在 ECMAScript 5 中，有 getter/setter 属性...请阅读此处：http://ejohn.org/blog/ecmascript-5-objects-and-properties/

非 IE 浏览器支持类似的功能：

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

对于 IE，您必须等待 IE9，或者仅使用基于 DOM 的 getter/setter。

Answer 6

由于 JavaScript 尚未普遍支持 setter/getter 方法，因此我建议您考虑如何设置变量。一种可行的技术是：

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]);

我个人不太热衷于向基础原型添加新方法，但它使短期内的重构变得更容易。

Answer 7

我个人更喜欢不使用代理，而是使用EventEmitter。它会像这样工作。

import { EventEmitter } from "events";

const testChangeEvent = new EventEmitter();
function changeTest(newVal){
  test = newVal
  testChangeEvent.emit("change")
}
let test = "val" // variable we want to listen for

现在每次我们调用changeTest()时我们都可以检测到它并使用

运行代码

testChangeEvent.on("change", () => {
  console.log("Code that is being called")
})

我 99% 确信你可以用 getter 和 setter 让它看起来更好、更防白痴，但这对于小型项目来说应该足够了，如果你的项目是一个商业想法，请调查一下，请不要欺骗人们调试几个小时。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get