17370845950

本文详解 `i++` 与 `++i` 的本质区别，指出因误用后置递增/递减导致计数器首次点击失效的问题，并提供修复方案、边界防护及最佳实践。

在 JavaScript 中，i++（后置递增）和 ++i（前置递增）虽仅差一个位置，语义却截然不同：

• i++ 先返回当前值，再将 i 加 1；
• ++i 先将 i 加 1，再返回新值。

你遇到的“首次点击不更新数字、第二次才生效”问题，根源正在于此：

tracker.innerHTML = i++; // ❌ 错误：赋值的是旧值 i，之后 i 才 +1

例如初始 i = 0：

• 第一次点击 donate → tracker.innerHTML = 0（显示 0），然后 i 变为 1；
• 第二次点击 → tracker.innerHTML = 1（显示 1），然后 i 变为 2；
  → 表现为“延迟一帧更新”，且状态与 UI 显示严重脱节。

✅ 正确写法是使用前置递增/递减，确保赋值即同步最新值：

const donateButton = document.getElementById("donate");
const unDonateButton = document.getElementById("undonate");
const tracker = document.getElementById("container");
let i = 0; // 推荐用 let 替代 var

tracker.textContent = i; // 使用 textContent 更安全（防 XSS）

donateButton.addEventListener("click", () => {
    donateButton.style.backgroundColor = "red";
    unDonateButton.style.backgroundColor = ""; // 重置另一按钮样式
    tracker.textContent = ++i; // ✅ 立即更新并显示新值
});

unDonateButton.addEventListener("click", () => {
    if (i > 0) {
        unDonateButton.style.backgroundColor = "blue";
        donateButton.style.backgroundColor = ""; // 重置另一按钮样式
        tracker.textContent = --i; // ✅ 安全递减
    } else {
        alert("Cannot undonate: quantity is already zero!");
    }
});

⚠️ 关键注意事项：

• 永远校验边界：undonate 操作必须检查 i > 0，避免数量变为负数；
• 样式互斥管理：切换按钮时应主动清除另一按钮背景色，否则会出现“红+蓝”残留；
• 避免全局变量污染：将 i 封装进 IIFE 或模块作用域更佳；
• 优先使用 textContent：比 innerHTML 更安全、性能更好（无 HTML 解析开销）；
• 事件监听推荐箭头函数或具名函数：避免隐式全局变量（原代码中 donate = function(){} 会意外创建全局 donate）。

总结：看似微小的 i++ 与 ++i 差异，实则是值传递时机的根本分歧。理解运算符求值顺序，是写出可预测、可维护前端逻辑的第一步。