如何清除StartGame函数内部的setInterval？现有clearInterval调用不生效

• 你调用clearInterval()时没有传入要清除的定时器ID，这个方法必须接收setInterval()返回的唯一ID作为参数才能生效
• 定时器ID是StartGame函数内部创建的，你没有把这个ID存到两个事件回调都能访问的作用域里，停止按钮的回调拿不到这个ID，自然没法清除定时器
• 原有代码还存在两个小问题：一是生成的随机字母没有赋值到DOM元素，页面不会显示结果；二是如果多次点击启动按钮，会创建多个并行的定时器，就算后续清除也只会清最后一个

JS代码 #

// 在两个事件回调都能访问的外层作用域声明变量存储定时器ID
let randomLetterTimer = null;

document.getElementById("rndletter").addEventListener("click", function StartGame() {
  // 启动前先清除已有的定时器，避免重复创建
  if (randomLetterTimer) {
    clearInterval(randomLetterTimer);
  }
  // 把setInterval返回的ID赋值给外层变量
  randomLetterTimer = setInterval(function() {
    const result0 = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
    const result1 = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
    const result2 = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
    // 将生成的字母赋值到对应DOM元素，页面显示结果
    document.getElementById('result0').innerText = result0;
    document.getElementById('result1').innerText = result1;
    document.getElementById('result2').innerText = result2;
  }, 2000);
});

document.getElementById("stprndletter").addEventListener("click", function() {
  // 传入存储的定时器ID清除对应定时器
  clearInterval(randomLetterTimer);
  // 重置变量，方便后续启动判断
  randomLetterTimer = null;
});

HTML代码（原有代码无需修改，可直接使用） #

<button id="rndletter">Start game</button>
<button id="stprndletter">Stop game</button>
<td style="text-align: center; color: blue; font-size: 150%;">
  <b>
        <div id="result0"><br />
        </div>
    </b></td>
<td style="text-align: center; color: brown; font-size: 150%;">
  <b>
        <div id="result1"><br /></div>
    </b></td>
<td style="text-align: center; color: hotpink; font-size: 150%;"><b>
        <div id="result2"><br /></div>
    </b></td>

• 外层声明randomLetterTimer变量存储定时器ID，保证启动和停止的回调都能访问到这个值
• 启动时先判断是否已有定时器在运行，有就先清除，避免重复创建多个定时器
• 停止时给clearInterval传入存储的定时器ID，实现精准清除指定定时器
• 补充了DOM赋值逻辑，让生成的随机字母可以正常在页面展示

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