增加函数内的全局变量

Question

有人能告诉我为什么全局变量没有影响吗？ 函数中的局部变量有效。 但不是在函数之外。

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


});

console.log(increment); // Not incrementing

Answer 1

这是因为addEventListener异步工作。 代码最后一行的console.log语句在事件侦听器的回调运行之前执行，因此increment变量的值仍然为 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变量。