JS计数器增减按钮数值异常及点击延迟的原因咨询

问题描述 #

我制作了一个包含「Decrease（减少）」「Reset（重置）」「Increase（增加）」三个按钮的简易计数器项目，所有按钮均绑定了onclick事件。

HTML代码：

<body>
  <wrapper>
    <h1>Counter</h1>
    <h2 id="counter">0</h2>
     <div class="buttonContainer">
        <button onclick="decrease()">Decrease</button>
        <button onclick="reset()">Reset</button>
        <button onclick="increase()">Increase</button>
     </div>
 </wrapper>
</body>

最初的JS代码：

let i = 0;

function increase() {
  document.getElementById('counter').innerHTML = i;
  i++;
}

function decrease() {
  document.getElementById('counter').innerHTML = i;
  i--;
}

function reset() {
  i = 0;
  document.getElementById('counter').innerHTML = i;
}

发现采用先更新counter的innerHTML，再执行i++/i--的逻辑时，出现异常：

• 计数器显示1时，点击Increase按钮需点击两次才会递增；
• 点击Decrease按钮时，数值会先增加1再减少，反之亦然。

调整代码顺序（先执行i++/i--，再更新innerHTML）后功能正常：

let i = 0;

function increase() {
  i++;
  document.getElementById('counter').innerHTML = i;
}

function decrease() {
  i--;
  document.getElementById('counter').innerHTML = i;
}

已解决功能问题，但无法理解为何函数未相互引用，却出现增减逻辑颠倒、点击延迟生效的情况，希望得到技术解答。

解答 #

核心原因：内存变量与DOM的更新顺序错配 #

页面显示的计数器值是DOM元素的内容，而i是内存中的变量，二者是完全独立的存储单元。只有通过innerHTML = i这类操作，才会把内存变量的值同步到DOM上。你的错误逻辑恰好搞反了变量更新和DOM同步的顺序，导致显示值和实际变量值不同步。

错误逻辑的分步拆解 #

以increase函数为例

初始状态：页面显示0，内存中i = 0

1. 第一次点击Increase：
   • 先执行innerHTML = i → 页面同步的是当前i的初始值0，所以页面没变化
   • 再执行i++ → 内存中i变成1（但页面没同步这个新值）
2. 第二次点击Increase：
   • 执行innerHTML = i → 页面同步的是上次点击后i的值1，页面才显示1
   • 再执行i++ → 内存中i变成2
     这就是“点击两次才看到递增”的本质：每次点击同步的都是上一次操作后的旧值，新值要等下一次点击才会显示。

decrease函数的异常解析

假设经过两次错误的Increase操作后，页面显示1，此时内存中i实际是2：

1. 点击Decrease：
   • 先执行innerHTML = i → 页面同步i=2，用户看到数值从1变成2（误以为是“先增加”）
   • 再执行i-- → 内存中i变成1（但页面已经显示了旧的2）
     这就造成了“数值先增后减”的错觉，本质是DOM先同步了旧变量值，变量更新滞后于渲染。

正确顺序的合理性 #

把i++/i--放在DOM更新之前时，每次操作都会：

1. 先修改内存中的i，得到本次操作后的目标值
2. 再把最新的i同步到页面上
   这样内存变量值和页面显示值完全同步，操作和预期完全匹配。

内容的提问来源于stack exchange，提问作者SS117