Javascript/Jquery benutzerdefinierte Ereignis basierend auf dem Status mehrerer Variablen

Question

Ich habe mehrere Variablen in Javascript (sagen wir zum Beispiel aValue, bValue, cValue). Alle diese Variablen sind anfangs auf 0 gesetzt. Jetzt habe ich mehrere Funktionen/Ereignisse, die diese Werte gemäß meiner eigenen Logik ändern. Wenn alle diese drei Variablenwerte 1 werden, möchte ich ein neues Ereignis auslösen, mit dem ich das DOM ändern kann.

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

Ich muss ein Ereignis auslösen, wenn alle diese Funktionen aufgerufen werden (wodurch alle Variablen auf 1 geändert werden). Mit diesem Event möchte ich das DOM ändern.

So etwas wie

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

Gibt es eine Möglichkeit, es zu tun.

Answer 1

Ja, eine Funktion verwenden, rufen Sie es jedes Mal, wenn Sie

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

Erstellen Sie eine andere Funktion einen der Werte ändern und dort Werte überprüfen darin

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

Diese Lösung ist ein bisschen komplizierter ist aber wird dir viel mehr Freiheit geben. Nehmen wir an, Sie haben mehrere Funktionen/Ereignisse, die diese Werte ändern, so dass Sie bei den anderen Lösungen eine andere Funktion von vielen Orten aufrufen müssen, die schwer zu warten sind.

Sie berücksichtigen sollen ein Proxy

Das Proxy-Objekt wird verwendet, um benutzerdefiniertes Verhalten für grundlegende Operationen zu definieren (z Eigenschaft Lookup, Zuordnung, Aufzählung, Funktion Aufruf, etc).

Sie können ein einzelnes Objekt haben und fügen Sie alle Variablen, die Sie als Eigenschaften benötigen und mit Proxy fügen Sie ein set() und get() Funktionen für die Änderungen zu hören Ihnen

Werte

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

Nun ist die get() macht alle Eigenschaften Ihres Objekts = 0 standardmäßig, also wenn Sie console.log(values.a, values.b, values.c); tun, erhalten Sie 0 0 0

Die set() legt den Wert für Ihre Eigenschaften fest, prüft aber auch, ob alle Eigenschaften = 1 sind, und wenn ja, feuern Sie die alterDOM()-Funktion, in der Sie alle Ihre Logik hinzufügen können.

Also, wenn Sie tun

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

Die alterDOM() wird gefeuert werden

Bitte beachten Sie, das die Anzahl der Eigenschaften unabhängig Sie hinzufügen, so dass es die gleiche funktioniert, wenn Sie 3 haben, 5 oder 100 Variablen zum Arbeiten, ohne den Code zu ändern.