Frage an javascript – Wie kann in JavaScript ein Ereignis ausgelöst werden, wenn der Wert einer Variablen geändert wird? [Duplikat]

20

Diese Frage hat hier bereits eine Antwort:

Überwachen von Variablenänderungen in JavaScript 17 Antworten

Ich habe zwei Variablen:

var trafficLightIsGreen = false; 
var someoneIsRunningTheLight = false;

Ich möchte ein Ereignis auslösen, wenn die beiden Variablen mit meinen Bedingungen übereinstimmen:

if(trafficLightIsGreen && !someoneIsRunningTheLight){
    go(); 
}

Angenommen, diese beiden Booleschen Werte können sich jederzeit ändern, wie kann ich dann meine auslösen?go() Methode, wenn sie nach meinen Bedingungen ändern?

Was hast du schon probiert? Jamie Keeling
Wickeln Sie sie mit Get- und Setter-Methoden in Objekte ein und lösen Sie dann das Ereignis im Setter aus. Mike Christensen
Ich glaube, Sie möchten sich das mal ansehencodeproject.com/Articles/13914/… MilkyWayJoe

Deine Antwort

7   die antwort
29

das ausgelöst wird, wenn ein bestimmter Wert in Javascript geändert wird. Sie können eine Reihe von Funktionen bereitstellen, die die spezifischen Werte umschließen und Ereignisse generieren, wenn sie zum Ändern der Werte aufgerufen werden.

function Create(callback) {
  var isGreen = false;
  var isRunning = false;
  return { 
    getIsGreen   : function()  { return isGreen; },
    setIsGreen   : function(p) { isGreen = p; callback(isGreen, isRunning); },
    getIsRunning : function()  { return isRunning; },
    setIsRunning : function(p) { isRunning = p; callback(isGreen, isRunning); }
  };
}

Nun können Sie diese Funktion aufrufen und den Callback zur Ausführung verknüpfengehen():

var traffic = Create(function(isGreen, isRunning) {
  if (isGreen && !isRunning) {
    go();
  }
});

traffic.setIsGreen(true);
+1 Ich habe gerade erst angefangen zu tippen :) tolle Antwort! Ja͢ck
0

dann mithilfe einer speziellen Funktion dessen Inhalt ändern. oder greifen Sie über zuwindow.

Mit dem folgenden Code können benutzerdefinierte Ereignisse ausgelöst werden, wenn Werte geändert wurden, solange Sie das Format verwendenchangeIndex(myVars, 'variable', 5); verglichen mitvariable = 5;

Beispiel:

function changeIndex(obj, prop, value, orgProp) {
    if(typeof prop == 'string') { // Check to see if the prop is a string (first run)
        return changeIndex(obj, prop.split('.'), value, prop);
    } else if (prop.length === 1 && value !== undefined &&
               typeof obj[prop[0]] === typeof value) {
        // Check to see if the value of the passed argument matches the type of the current value
        // Send custom event that the value has changed
        var event = new CustomEvent('valueChanged', {'detail': {
                                                          prop : orgProp,
                                                          oldValue : obj[prop[0]],
                                                          newValue : value
                                                       }
                                                     });
        window.dispatchEvent(event); // Send the custom event to the window
        return obj[prop[0]] = value; // Set the value
    } else if(value === undefined || typeof obj[prop[0]] !== typeof value) {
        return;
    } else {
        // Recurse through the prop to get the correct property to change
        return changeIndex(obj[prop[0]], prop.slice(1), value);
    }
,};
window.addEventListener('valueChanged', function(e) {
    console.log("The value has changed for: " + e.detail.prop);
});
var myVars = {};
myVars.trafficLightIsGreen = false;
myVars.someoneIsRunningTheLight = false;
myVars.driverName = "John";

changeIndex(myVars, 'driverName', "Paul"); // The value has changed for: driverName
changeIndex(myVars, 'trafficLightIsGreen', true); // The value has changed for: traggicIsGreen
changeIndex(myVars, 'trafficLightIsGreen', 'false'); // Error. Doesn't set any value

var carname = "Pontiac";
var carNumber = 4;
changeIndex(window, 'carname', "Honda"); // The value has changed for: carname
changeIndex(window, 'carNumber', 4); // The value has changed for: carNumber

Wenn du schon immer mal aus dem ziehen wolltestwindow Objekt, das Sie ändern könnenchangeIndex obj immer auf window setzen.

0
function should_i_go_now() {
    if(trafficLightIsGreen && !someoneIsRunningTheLight) {
        go();
    } else {
        setTimeout(function(){
            should_i_go_now();
        },30);
    }
}
setTimeout(function(){
    should_i_go_now();
},30);
0

fungen wünschen, können Sie eine Platzierung vornehmen

window.setInterval()

Beispiel: Ihr Browser stürzt nicht ab:

window.setInterval(function() {
    if (trafficLightIsGreen && !someoneIsRunningTheLight) {
        go();
    }
}, 1);
Wäre dies eine gute Codierungspraxis mitsetInterval statt Getter und Setter? lowtechsun
1

var trafficLightIsGreen = false; 
var someoneIsRunningTheLight = false;

var setTrafficLightIsGreen = function(val){
    trafficLightIsGreen = val;
    if (trafficLightIsGreen and !someoneIsRunningTheLight){
        go(); 
    };
};
var setSomeoneIsRunningTheLight = function(val){
    trafficLightIsGreen = val;
    if (trafficLightIsGreen and !someoneIsRunningTheLight){
        go(); 
    };
};

und anstatt einer Variablen einen Wert zuzuweisen, rufen Sie einfach den Setter auf:

setTrafficLightIsGreen(true);
0

setInterval/Timeout.

Wenn Sie nur Firefox unterstützen können, können Sie verwendenhttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

Welche wird Ihnen sagen, wenn sich eine Eigenschaft eines Objekts ändert.

Ihre beste Lösung ist wahrscheinlich, sie zu einem Teil eines Objekts zu machen und Getter hinzuzufügen, Setter, die Sie selbst benachrichtigen können, wie JaredPar in seiner Antwort gezeigt hat

2
//ex:
/*
var x1 = {currentStatus:undefined};
your need is x1.currentStatus value is change trigger event ?
below the code is use try it.
*/
function statusChange(){
    console.log("x1.currentStatus_value_is_changed"+x1.eventCurrentStatus);
};

var x1 = {
    eventCurrentStatus:undefined,
    get currentStatus(){
        return this.eventCurrentStatus;
    },
    set currentStatus(val){
        this.eventCurrentStatus=val;
    }
};
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
x1.currentStatus="create"
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
x1.currentStatus="edit"
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
console.log("currentStatus = "+ x1.currentStatus);

Verwandte Fragen