在JavaScript中，如何在變量值更改時觸發事件？

Question

我有兩個變量：

var trafficLightIsGreen = false; 
var someoneIsRunningTheLight = false; 

我想觸發一個事件時，這兩個變量與我的條件達成一致：

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

假設這兩個布爾值可以在任何時刻改變，怎麼能當我根據自己的情況改變時，我會觸發我的go()方法嗎？

Answer 1

沒有當給定值是引發事件在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); } 
    }; 
} 

現在你可以調用這個函數和鏈接回調執行去（）：

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

traffic.setIsGreen(true); 

Answer 2

沒有辦法與setInterval/Timeout輪詢。

如果只能支持Firefox，你可以使用https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watch

它會告訴你，當一個對象的屬性發生更改。

你最好的解決辦法可能是讓他們的對象的一部分，增加的getter，setter方法，你可以自己發出通知，作爲JaredPar顯示，他的回答

Answer 3

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

Answer 4

最可靠的方法是使用setter方法類似：

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

然後代替給一個變量賦值，你只需調用setter：

setTrafficLightIsGreen(true); 

Answer 5

您可以始終將變量作爲對象的一部分，然後使用特殊功能修改其內容。或通過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設置爲窗口。

Answer 6

如果你願意有關於檢查之間的1毫秒的延遲，你可以放置

window.setInterval() 

就可以了，比如這不會崩潰您的瀏覽器：

window.setInterval(function() { 
    if (trafficLightIsGreen && !someoneIsRunningTheLight) { 
     go(); 
    } 
}, 1); 

Answer 7

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