JavaScript文本随机动画异常：悬停不停止+按钮宽度变动修复求助

问题根源 #

1. 随机化无法停止：代码依赖event.target.dataset.value获取原文本，但HTML里的<span id="info-btn">未设置data-value属性，导致event.target.dataset.value.length为undefined，判断条件iteration >= undefined永远不成立，定时器无法被清除。
2. 按钮宽度变化：随机字符的渲染宽度和原文本存在差异，导致按钮尺寸波动。

修复方案 #

1. 补充HTML的data-value属性

给目标span添加data-value存储原始文本：

<div class="nav-buttons">
    <div class="btn1">
        <button>PROJECTS</button>
    </div>

    <div class="btn2">
        <button>
            <span id="info-btn" data-value="INFO">INFO</span>
        </button>
    </div>
    <div class="theme-btn">
        <button onclick="changeClass()">Change Class</button>
    </div>
</div>

2. 固定按钮宽度

利用等宽字体特性，给按钮设置固定宽度避免尺寸跳动：

nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 4em;
}

.nav-buttons{
    display: flex;
    align-items: center;
    gap: 2em;
}

button{
    position: relative;
    background: none;
    outline: none;
    border: 1px solid var(--secondary);
    border-radius: 0.25em;
    font-size: 17px;
    color: var(--secondary);
    font-family: Monorama;
    padding: 0.25em 0.75em;
    cursor: pointer;
}

/* 新增：固定INFO按钮宽度 */
.btn2 button {
    width: 3.5ch; /* 等宽字体下，1ch对应一个字符宽度 */
    text-align: center;
}

3. 优化JavaScript逻辑

确保定时器正常清除，同时补充鼠标离开时的恢复逻辑：

//Info Randomizer
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let interval = null;
const infoBtn = document.getElementById("info-btn");

infoBtn.onmouseover = (event) => {  
  let iteration = 0;
  
  clearInterval(interval);
  const originalText = event.target.dataset.value;
  
  interval = setInterval(() => {
    event.target.innerText = originalText
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          return originalText[index];
        }
      
        return letters[Math.floor(Math.random() * 26)]
      })
      .join("");
    
    if(iteration >= originalText.length){ 
      clearInterval(interval);
    }
    
    iteration += 1;
  }, 30);
}

// 鼠标离开时立即恢复原文本并清理定时器
infoBtn.onmouseleave = (event) => {
  clearInterval(interval);
  event.target.innerText = event.target.dataset.value;
}

额外说明 #

• 提前缓存infoBtn元素，避免重复DOM查询；用变量缓存原文本，逻辑更清晰。

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