Question

我在javascript中有多个变量（例如aValue，bValue，cValue）。所有这些变量最初都设置为0.现在我有多个函数/事件，根据我的自定义逻辑更改这些值。当所有这三个变量值都变为1时，我想要触发一个新事件，我可以通过它来改变DOM。

var aValue = 0;
var bValue = 0;
var cValue = 0;

// On doing something functionA is called
functionA() {
  aValue = 1;
}

//On triggering some event function is called
$(selector).on(event, function() {
  bValue = 1;
});

//On doing something functionC is called
functionC() {
 cValue = 1;
}

我需要在调用所有这些函数时触发事件（从而将所有变量更改为1）。通过使用此事件，我想要更改DOM。

像

这样的东西

$(selector).on(// when aValue == 1 && bValue == 1 && cValue == 1, function(){
  // do something
});

有没有办法做到这一点。

Answer 1

是的，使用一个函数，每次修改任何值时调用它

var aValue = 0;
var bValue = 0;
var cValue = 0;

function testAll() {
  if(aValue  == 1 && bValue   == 1 && cValue   == 1){
    alert('triggered all');
  };
}

// On doing something functionA is called
functionA() {
  aValue = 1;
  testAll();
}

//On triggering some event function is called
$(selector).on(event, function () {
  bValue = 1;
  testAll();
});

//On doing something functionC is called
functionC() {
  cValue = 1;
  testAll();
}

Answer 2

创建另一个函数并检查其中的值

functionA() {
  aValue = 1;
  checkValue();
}

//On triggering some event function is called
$(selector).on(event, function() {
  bValue = 1;
  checkValue();
});

//On doing something functionC is called
functionC() {
 cValue = 1;
 checkValue();
}


function checkValue(){
    if(aValue  == 1 && bValue   == 1 && cValue   == 1){
        // do your stuff
    }
}

Answer 3

这个解决方案有点复杂，但会给你更多的自由。假设您有多个函数/事件可以更改这些值，因此其他解决方案将要求您从许多难以维护的地方调用另一个函数。

您应该考虑使用Proxy

Proxy对象用于定义基本的自定义行为操作（例如属性查找，赋值，枚举，函数调用等）。

您可以拥有一个对象并添加所需的所有变量作为属性，并使用Proxy添加set()和get()函数来监听对值的更改

var handler = {
    get: function(target, name){
        return name in target?
            target[name] : 0;
    },
    set: function(target, name, value){
        var firstTime = !(name in target);
        target[name] = value;
        if (firstTime) return value;
        for (var key in target) {
          if (target.hasOwnProperty(key) && target[key] !== 1) {
            return value;
          }
        }
        alterDOM();
    }
};

function alterDOM(){
    // do your stuff
    console.log('All properties are = 1!');
};

var values = new Proxy({}, handler);

现在get()默认情况下会生成对象= 0的所有属性，因此，如果您执行console.log(values.a, values.b, values.c);，您将获得0 0 0

set()正在为您的属性设置值，但也检查所有属性是否为= 1，如果是，则触发alterDOM()函数，您可以在其中添加所有逻辑。

所以，如果你这样做

values.a = 1;
values.b = 1;
values.c = 1;

alterDOM()将被解雇

请注意，这与您添加的属性数量无关，因此如果您有3个，5个或100个变量可以使用它，它将工作相同，而无需更改代码。

基于多个变量状态的Javascript / Jquery自定义事件

3 个答案: