setInterval函数不能使用外部变量

Question

为什么prevColor总是undefined？

此代码应记录新颜色（actualColor）和上一颜色（prevColor）。但是我无法从prevColor函数内部保存到setInterval。这个bug在哪里？我不认为这是一个上下文问题。但我不确定。里面没有this ......

您能否告诉我如何在actualColor函数中保存prevColor中setInterval的值？

var actualColor;
var prevColor;


// do some user action and change actualColor


setInterval(function () {
    // only log the color if it differs from prevColor
    if (actualColor != prevColor) {
        console.log("actualColor: " + actualColor + ", prevColor: " + prevColor);
    }
    prevColor = actualColor;
}, 100);

控制台：

actualColor: acff06, prevColor: undefined

Answer 1

我认为它必须是你的上下文 - 我创建了一个简单的网页，其中包含了你上面的所有内容，并且它工作正常 - 即使没有在变量上设置初始值：

我将您的代码放在HEAD中的脚本标记中，并添加了

<input
    type="text"
    id="actualColor"
    />
<input
    type="button"
    onclick = "actualColor = document.getElementById('actualColor').value;"
    value = "change colour" />

提供一种在网页中更改actualColor的方法（而不是使用控制台）

Answer 2

您需要初始化prevColor的值，否则第一次undefined

只做

var actualColor;
var prevColor = "";


// do some user action and change actualColor


setInterval(function () {
    // only log the color if it differs from prevColor
    if (actualColor != prevColor) {
        console.log("actualColor: " + actualColor + ", prevColor: " + prevColor);
    }
    prevColor = actualColor;
}, 100);