满足特定条件时程序无法立即重置初始值的问题求助

你的代码逻辑顺序错误，导致重置操作晚触发了一次mouseover事件：

• 当count等于10时，依然会进入if (count <= 10)分支，先设置背景色，再执行count++（变成11）和a += 0.1（变成1.1，浏览器会将超过1的透明度自动修正为1，你看到的a=0可能是操作误解）。
• 只有下一次触发mouseover时，才会进入else分支重置count和a，因此会出现先输出count=11，再回到初始值的情况。

根据你“count达到10时立即重置为1、a回到0.1”的需求，提供两种修复方式：

方式一：提前判断重置时机 #

先检查是否达到阈值，完成重置后再执行样式更新和计数操作：

const box = document.querySelector('.box');
const r = 60;
const g = 60;
const b = 60;
let a = 0.1;
let count = 0;
box.addEventListener('mouseover', () => {
  // 达到上限则直接重置为目标初始值
  if (count >= 10) {
    count = 1;
    a = 0.1;
  } else {
    count++;
    a += 0.1;
  }
  // 统一设置背景色
  box.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
  console.log(count);
});

方式二：调整原分支的判断条件 #

修改if的判断逻辑，确保达到阈值时立即重置并同步更新样式：

const box = document.querySelector('.box');
const r = 60;
const g = 60;
const b = 60;
let a = 0.1;
let count = 0;
box.addEventListener('mouseover', () => {
  if (count < 10) {
    box.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
    count++;
    a += 0.1;
  } else {
    // 重置为期望的初始值并同步样式
    count = 1;
    a = 0.1;
    box.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
  }
  console.log(count);
});

原代码的问题在于执行顺序颠倒：先执行样式更新和计数递增，再判断是否需要重置，导致阈值触发时多执行了一次递增操作。修复的关键是确保在触发阈值的那次mouseover事件内，就完成重置并同步状态。

内容的提问来源于stack exchange，提问作者Mahadi Hasan Sumon