如何檢查 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() function 調用之后放置任何內容，它就不會運行。 如果我在它前面放任何東西，那么它們只會運行一次。

Answer 1

每當值更改時，您可以設置一個標志（將 boolean 變量設置為 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

當您從自身調用管理游戲 function 時，您正在創建一個無限循環。

當這個無限循環運行時，JS 無法處理事件監聽器。 這就是為什么在你的 manageGame 調用運行之后什么都沒有的原因。

如果您想添加一個不斷檢查變量狀態的 function，我建議使用間隔 function 重復調用您的 checkValues function。

設置間隔的格式為：

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

所以對你來說，它看起來像：

setInterval(checkValues(), 100);

這將每 100 毫秒（每秒 10 次）調用您的 checkValues function。

Answer 3

您可以通過創建允許注冊事件處理程序的 object 來解決您的問題。 然后，當值更改時，它會調用所有已注冊的處理程序。

 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() function 放在那里。 這意味着我可以完全擺脫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>