如何在具有全局范围的 Javascript 对象中存储函数

Question

我正在尝试运行一个根据服务器端变量更改 DOM 的用户脚本。初始 updateStatus() returns 正确的值，但是随着服务器更改变量，glowIf 条件内的变量不会改变。

如果我运行这些条件来自对象外部，像这样：

 function updateStatus(){
   console.log(var1 === var2);
 };

一切正常，但一旦我将它们存储在一个对象中，条件就不会更新。像这样：

 function updateStatus(){
   console.log(foo.condition);
 };

HTML:

 <div id='foo'>
   This condition is true
 </div>
 <div id='bar'>
   This condition is false
 </div>

 <!-- Server sets values of var1 and var2-->
 <-- example var1 = 4, var2 = 4 -->

CSS:

 .glow {
   border: 1px solid gold;
 }

JS:

  // Update as server changes values
  const refreshRate = setInterval(updateStatus, 1000); 

  // Example Object
  const itemDef = [{
      name: 'foo',
      condition: (var1 === var2)
    },
    {
      name: 'bar',
      condition: false }];

  // Check Conditions
  function updateStatus() {
    jQuery.each(itemDef, function(i, val) {
      if (val.condition) {
        $('#' + val.name).addClass('glow');
      } else {
        $('#' + val.name).removeClass('glow');
      }
    });
  }

我似乎无法在初始条件检查后更新变量。它们是每秒不断更新的服务器端变量。

这是一个更大的例子： http://jsfiddle.net/byhx620r/5/

Answer 1

发生这种情况是因为 var1 === var2 的值仅在您定义数组时计算一次，结果被存储并且有关如何获取该值的任何信息都丢失了。

您想要的可能是每次访问 condition 属性.

时检查条件

你有两种方法：

使用 getter（不建议）
使用方法代替静态属性

我建议你这个解决方案：

将条件从布尔值更改为 函数 return 布尔值:

const itemDef = [{
      name: 'foo',
      condition: () => var1 === var2
    },
    {
      name: 'bar',
      condition: () => false }];

最后，通过调用方法检查条件值：

if (val.condition())

Ps。为什么用 JQuery.each 代替 itemDef.forEach？它更具可读性，纯 js 并且与所有现代浏览器具有很好的兼容性

如何在具有全局范围的 Javascript 对象中存储函数

How to store functions inside Javascript object that have a global scope

html

javascript

css

jquery

tampermonkey