如何检查一个值是否在Javascript中发生了变化?

Question

那么，如何检查用户输入是否改变了Javascript中的值呢?例如，如果他们单击一个按钮，将变量的值更改为1，您如何检测它?

目前，我有一个变量:

var value = 1;
var lastValue = value;

，我想检测它什么时候会改变，比如，如果用户输入一个新值。

我已经试过了:

function manageGame() {
checkValues();
manageGame();
}
function checkValues() {
if (value !== lastValue) {
alert("OOOOOH NO");
lastValue = value;
}
}
manageGame()
document.getElementById("btn").onclick = function() {
value += 1;
}

然后是HTML:

<button id='btn'>Click me to increase value</button>

但是我不知道如何改变值，因为如果我在manageGame()函数调用之后放任何东西，它就不会运行。如果我把任何东西放在它前面，那么它们只会运行一次。

Answer 1

当值改变时，您可以设置一个标志(将布尔变量设置为true):

var valueHasChanged = false;
var value = 1;
function checkValues() {
if (valueHasChanged) {
alert("OOOOOH NO");
valueHasChanged = false;
}
}
document.getElementById("btn").onclick = function() {
value += 1;
valueHasChanged = true;
}

Answer 2

当你从自身调用manage game函数时，你正在创建一个无限循环。

当这个无限循环运行时，JS不能处理事件监听器。这就是为什么manageGame调用后没有任何东西运行。

如果你想添加一个不断检查变量状态的函数，我建议使用间隔函数来重复调用你的checkValues函数。

设置间隔的格式为:

setInterval( yourFunction() , interval time (in ms))

所以对你来说，它看起来像:

setInterval(checkValues(), 100);

这将每100毫秒调用一次checkValues函数(每秒10次)。

Answer 3

您可以通过创建一个允许注册事件处理程序的对象来解决这个问题。然后，当值被改变时，它调用所有已注册的处理程序。

const value = (function () {
let value = 1;
const handlers = [];
return {
get current() { return value },
set current(newValue) {
if (newValue === value) return;
const oldValue = value;
value = newValue;
handlers.forEach(handler => handler(newValue, oldValue));
},
addChangeListener(handler) {
handlers.push(handler);
},
};
})();
const val = document.getElementById("val");
val.textContent = value.current
value.addChangeListener(function (newValue, oldValue) {
console.log("OOOOOH NO");
console.log(`value.current changed from ${oldValue} to ${newValue}`);
val.textContent = value.current;
});
document.getElementById("btn").onclick = function() {
value.current += 1;
}

<button id='btn'>Click me to increase value</button>
<span id="val"></span>

Answer 4

我有答案了!

当按钮被点击的值总是改变，所以我可以把checkValues()功能在那里。这意味着我可以完全摆脱manageGame()。

因此，完成的代码看起来像这样:

var value = 1;
var lastValue = value;
function checkValues() {
if (value !== lastValue) {
alert("OOOOOH NO");
lastValue = value;
}
}
document.getElementById("btn").onclick = function() {
value += 1;
checkValues();
}

HTML:

<button id="btn">Click me to increase value</button>
<script src="stest.js"></script>