如何保存内部作用域变量以用于外部作用域？

Question

如何获取变量cool以便我可以在 的函数之外使用它gotSpeech()？我想将它用于guessedCorrect()单击按钮时也会运行的功能。那可能吗？

let speechRec = new p5.SpeechRec('en-US', gotSpeech);

function gotSpeech() {

    if (speechRec.resultValue) {

        cool = speechRec.resultString;

        if (cool == "0") {

            zero.style.color = "#dc3545";

        }

        if (cool == "5") {

            five.style.color = "#dc3545";

        }

        if (cool == "10") {

            ten.style.color = "#dc3545";

        }

        if (cool == "15") {

            fifteen.style.color = "#dc3545";

        }

        if (cool == "20") {

            twenty.style.color = "#dc3545";

        }

    }

}

button.addEventListener("click", function(event) {

    resetround();

    speechRec.start();

    setTimeout("getComputerChoice()", 3000);

    setTimeout("identifyHands()", 3000);

    clearInterval(myInterval);

    myInterval = setInterval(function() {

        time--;

        if (time == -1) {

            button.innerHTML = "Again";

            clearInterval(myInterval);

            time = 4;

        } else {

            button.innerHTML = "Start";

            numbers.innerHTML = time;

        }

    }, 1000);

    setTimeout("guessedCorrect()", 5000);

})

输出undefined在超出范围时返回。

Answer 1

有很多方法可以解决这个问题。最明显的是修改您的调用guessedCorrect()以显式传递它：setTimeout(() => { guessedCorrect(cool); }, 5000);当然，这意味着您需要修改 的定义guessedCorrect()以适应传入的参数，即：function guessedCorrect(cool) { //...这具有不通过字符串名称引用函数的额外优势。正如@Shahzad 所说，这会导致您的代码在缩小时中断，因为缩小不会改变字符串。更好的是使用函数引用，所以：setTimeout(guessedCorrect, 5000);此外，if/else if通过使用switch()块甚至对象作为颜色值映射可以大大减少您重复的博客。[编辑]回应你后来的评论：this是正在执行当前闭包的上下文。默认上下文，即直到有什么改变它，是window。通常上下文是自动设置的，例如在this指向触发元素的事件回调中。但是在您的情况下，我们可以（尽管这将是一种相当奇怪的方法）设法this指向 的值cool，因此：setTimeout(guessedCorrect.bind(cool), 5000);之后，调用thisinsideguessedCorrect()将调出调用cool函数时存在的值。

Answer 2

好吧，您实际上需要的是值而不是变量；以及您已经可以使用speechRec.resultString点表示法访问它的值。你可以尝试这样的事情：// An modification that the post from above offers you, which is pretty good for this case. value-to-colours const colors = { 0: '#dc3545', 5: '#dc3545', 10: '#dc3545', 15: '#dc3545', 20: '#dc3545',};function gotSpeech() {    if (speechRec.resultValue) {        zero.style.color = colors[speechRec.resultString];    }}button.addEventListener("click", function(event) {    resetround();    speechRec.start();    // Why are you passing the functions as string?    // Better do this    setTimeout(getComputerChoice, 3000);    setTimeout(identifyHands, 3000);    clearInterval(myInterval);    myInterval = setInterval(function() {        time--;        if (time == -1) {            button.innerHTML = "Again";            clearInterval(myInterval);            time = 4;        } else {            button.innerHTML = "Start";            numbers.innerHTML = time;        }    }, 1000);    setTimeout(guessedCorrect.bind(null, speechRec.resultString), 5000);})如果您的guessedCorrect函数是从另一个文件导出的，我将使用该bind函数创建一个具有给定参数的新函数。否则，如果您在同一个文件中有该函数，只需像这样传递函数：setTimeout(guessedCorrect, 5000);在函数内只使用全局变量speechRec.resultString。注意：尽量使用严格比较 ( ===) 而不是抽象 ( ==)。