如何让window.setInterval仅点击开始游戏按钮触发且不额外封装函数

你现有代码的错误在于直接将setInterval(...)的执行结果作为addEventListener的第二个参数传入：

• JS引擎解析到该行代码时，会立刻执行setInterval函数生成定时器，返回的数值类型的定时器ID会被当成点击事件的回调函数
• 这就导致页面加载完成后定时器立刻启动，而你点击按钮时实际触发的是无意义的定时器ID，不会执行生成随机字母的逻辑

你要求不需要额外封装setInterval的调用函数，只需要把setInterval逻辑包裹在点击事件的匿名回调里即可，修复后代码如下：

<td style="text-align: center;" colspan="3"><button id="rndletter">Start game</button>

<script>
    // 可选：声明变量存储定时器ID，避免多次点击生成多个定时器
    let timer = null
    document.getElementById("rndletter").addEventListener("click", function() {
        // 可选：每次点击先清空之前的定时器，防止重复触发
        if (timer) clearInterval(timer)
        timer = window.setInterval(function() {
            var result0 = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
            var result1 = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
            var result2 = String.fromCharCode(Math.floor(Math.random() * (122 - 97)) + 97);
            document.getElementById("result0").innerText = result0;
            document.getElementById("result1").innerText = result1;
            document.getElementById("result2").innerText = result2;
        },2000);
    });
</script>

如果不需要处理多次点击重复生成定时器的场景，可以去掉可选的timer相关逻辑，仅保留外层匿名函数包裹setInterval即可满足你的基础需求。

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