Вопрос по javascript – В javascript, как вызвать событие, когда значение переменной изменяется? [Дубликат]

20

This question already has an answer here:

Listening for variable changes in JavaScript 17 answers

У меня есть две переменные:

var trafficLightIsGreen = false; 
var someoneIsRunningTheLight = false;

Я хотел бы вызвать событие, когда две переменные соответствуют моим условиям:

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

Предполагая, что эти два логических значения могут измениться в любой момент, как я могу вызвать мойgo() метод, когда они меняются в соответствии с моими условиями?

Что ты уже пробовал? Jamie Keeling
Оберните их в объекты методами getter и setter, затем запустите событие в setter. Mike Christensen
Я думаю, вы могли бы взглянуть на этоcodeproject.com/Articles/13914/… MilkyWayJoe

Ваш Ответ

7   ответов
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);
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(); 
    };
};

и затем вместо присвоения значения переменной вы просто вызываете установщик:

setTrafficLightIsGreen(true);
29

которое возникает при изменении данного значения в Javascript. Что вы можете сделать, так это предоставить набор функций, которые обертывают определенные значения и генерируют события, когда они вызываются для изменения значений.

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

Теперь вы можете вызвать эту функцию и связать обратный вызов для выполненияgo():

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

traffic.setIsGreen(true);
Error: User Rate Limit Exceeded
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

являющиеся частью объекта, а затем использовать специальную функцию для изменения содержимого этого объекта. или получить к ним доступ черезwindow.

Следующий код можно использовать для запуска пользовательских событий, когда значения были изменены, пока вы используете форматchangeIndex(myVars, 'variable', 5); по сравнению сvariable = 5;

Пример:

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

Если вы всегда хотели вытащить изwindow объект, который вы можете изменитьchangeIndex всегда устанавливать obj как окно.

0

setInterval/Timeout.

Если вы можете поддерживать только Firefox, вы можете использоватьhttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

Который скажет вам, когда свойство объекта изменяется.

Ваше лучшее решение, вероятно, состоит в том, чтобы сделать их частью объекта и добавить геттеры, сеттеры, которые вы можете отправлять уведомления самостоятельно, как показал JaredPar в своем ответе.

0

чтобы между проверками была задержка около 1 миллисекунды, вы можете

window.setInterval()

например, это не приведет к сбою вашего браузера:

window.setInterval(function() {
    if (trafficLightIsGreen && !someoneIsRunningTheLight) {
        go();
    }
}, 1);
Error: User Rate Limit ExceededsetIntervalError: User Rate Limit Exceeded

Похожие вопросы