JavaScript中如何仅当运算结果小于100时执行指定操作？

云上老周

2026-5-9

解决JavaScript中条件判断内重复执行累加的问题

这个问题的根源是JavaScript运算符优先级搞的鬼，我来帮你拆解并解决：

问题分析

你写的if (progress += howmuch < 100)存在逻辑错误：

<运算符的优先级比+=更高，所以JS会先计算howmuch < 100（当howmuch为1时，结果是true，在数值运算中等价于1）
接着执行progress += 1，此时progress被修改为1
因为这个表达式的结果是1（转为布尔值为true），所以进入if代码块，又执行了一次progress += howmuch，导致progress变成2，这就是你看到两次输出的原因

解决方案

我们需要先判断「累加后的结果是否小于100」，再决定是否修改原变量，这里有两种清晰的写法：

方式一：使用临时变量（可读性更高）

let progress = 0
function earn(howmuch) {
  // 先计算累加后的结果，不修改原progress
  const newProgress = progress + howmuch;
  if (newProgress < 100) {
    progress = newProgress; // 满足条件才更新原变量
    console.log(progress); // 现在只会输出1，不会重复执行
  }
}
document.querySelector('.click-area').addEventListener('click', function() {
  earn(1)
})

方式二：用括号提升加法优先级

let progress = 0
function earn(howmuch) {
  // 括号让加法先执行，判断的是累加后的结果是否小于100
  if ((progress + howmuch) < 100) {
    progress += howmuch; // 满足条件再执行累加
    console.log(progress);
  }
}
document.querySelector('.click-area').addEventListener('click', function() {
  earn(1)
})