Question

有人可以告诉我为什么全局变量不起作用吗？函数中的局部变量起作用。但是不在函数之外。

let increment = 0;
button.addEventListener("click", function(){
    increment++;
    console.log(increment); // Works!


});

console.log(increment); // Not incrementing

Answer 1

这是因为addEventListener是异步工作的。代码的最后一行的console.log语句在运行事件侦听器的回调之前已执行，因此increment variabe的值仍为0。

Answer 2

此版本可能有助于演示正在发生的事情：

let increment = 0;

const button = document.getElementById('foo');
const output = document.getElementById('output');

const updateOutput = function() {
  output.innerHTML = `Value is ${increment} at ${new Date().toString().substring(16, 24)}`;
}

button.addEventListener("click", function(){
    increment++;
    updateOutput();
});
setInterval(updateOutput, 1000)

console.log(`External call, value: ${increment}`);

<div id="output"></div>
<hr/>
<div><button id="foo">Increment</button></div>

选择“运行代码段”以查看其运行情况。它每秒告诉您（全局）increment变量的当前值。单击按钮并因此增加值时，它也会更新。这两个函数都访问相同的全局increment变量。

在函数内部增加全局变量

2 个答案: