如何退出包含事件监听器的JavaScript game函数？

我的代码如下：

<body>
    
<h1>random heading</h1>
<button id="clickme">clickme</button>

<p id="yes"></p>
<p id="no"></p>

<script>
    const clickme = document.querySelector('#clickme')
    const yes = document.querySelector('#yes')
    const no = document.querySelector('#no')

    let yesScore = 0;
    let noScore = 0;
    
    function game() {
        clickme.addEventListener('click', myFunction);

        function myFunction(){
            let promptVar = prompt('y/n');

            if(promptVar === 'y') yes.textContent = ++yesScore;
            else if(promptVar === 'n') no.textContent = ++noScore;
            else return;

            if(yesScore + noScore === 5){
                console.log('over');
            }
        }
    }
</script>

</body>

问题：当yesScore + noScore === 5时，我想停止整个游戏的交互（也就是点击按钮不再有反应），但用return或break只能退出myFunction，标签跳转也因为跨函数边界无法生效。

解决方案1：移除点击事件监听器 #

游戏的核心交互是按钮的点击事件，当次数达标后，直接移除这个事件监听器，按钮就不会再触发myFunction了：

修改myFunction中的判断逻辑：

if(yesScore + noScore === 5){
    console.log('over');
    clickme.removeEventListener('click', myFunction); // 移除监听器，终止交互
}

说明 #

game函数在执行时只是完成了事件绑定，绑定完成后game函数本身就已经执行完毕了，你要终止的不是game函数（它早就跑完了），而是后续的按钮点击响应。移除监听器后，按钮再点击也不会触发逻辑，达到终止游戏的效果。

解决方案2：使用开关变量控制逻辑 #

如果之后需要重新开启游戏，用开关变量会更灵活。在game作用域内定义一个变量标记游戏状态，每次触发点击事件前先判断状态：

修改后的game函数：

function game() {
    let isGameOver = false; // 游戏状态开关
    clickme.addEventListener('click', myFunction);

    function myFunction(){
        if(isGameOver) return; // 游戏结束直接退出，不执行后续逻辑
        let promptVar = prompt('y/n');

        if(promptVar === 'y') yes.textContent = ++yesScore;
        else if(promptVar === 'n') no.textContent = ++noScore;
        else return;

        if(yesScore + noScore === 5){
            console.log('over');
            isGameOver = true; // 标记游戏结束
        }
    }
}

说明 #

这个方法不用移除事件监听器，只是通过开关变量阻断后续逻辑执行。如果需要重启游戏，只要把isGameOver设回false即可，无需重新绑定事件。

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