如何在事件监听器中优雅终止游戏逻辑并移除监听

胖雪姑娘_9831

胖雪姑娘_9831

2026-01-18

794人浏览

原创

如何在事件监听器中优雅终止游戏逻辑并移除监听

当 javascript 游戏达到结束条件(如总回合数满 5)时,不能用 `return` 或 `break` 退出外层函数,而应主动移除事件监听器,从而阻止后续触发——这是事件驱动场景下终止逻辑的标准实践。

在基于事件的交互式 Web 应用中(例如点击按钮触发提示输入的计分游戏),game() 函数本身只负责注册事件监听器,并不持续运行;真正被反复调用的是事件回调函数 myFunction。因此,“退出 game()”在语义上并不合理——它早已执行完毕。关键问题在于:如何让游戏逻辑在满足结束条件后不再响应后续点击?

正确解法是:在判定游戏结束(如 yesScore + noScore === 5)时,立即调用 removeEventListener() 移除绑定的监听器。这能确保事件系统彻底“失活”,既安全又符合事件生命周期规范。

以下是优化后的完整实现(含健壮性增强):

  <h1>Yes/No Score Game</h1>
  <button id="clickme">Start / Click Me</button>
  <p>Yes: <span id="yes">0</span></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11083" title="Java调试"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java调试" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11083" title="Java调试" class="overflowclass">Java调试</a>
													<p class="overflowclass">通过 JDWP 实现 Java 远程调试:连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。
术语注解
JDWP:Java Debug Wire Protocol,Java 调试有线协议(Java 远程调试底层通信协议)
remote JVM:远程 Java 虚拟机
step through code:代码单步调试(步入 / 步过 / 步出调试)
inspect variables:变量查看 / 变量检视
stac</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11083" title="Java调试" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p>No:  <span id="no">0</span></p>

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

    let yesScore = 0;
    let noScore = 0;

    function myFunction() {
      const input = prompt('Enter "y" for Yes or "n" for No (case-sensitive):');

      if (input === 'y') {
        yesScore++;
        yesEl.textContent = yesScore;
      } else if (input === 'n') {
        noScore++;
        noEl.textContent = noScore;
      } else {
        alert('Invalid input. Please enter "y" or "n".');
        return; // 忽略非法输入,不计入总回合
      }

      // 检查是否达到结束条件(共 5 次有效响应)
      if (yesScore + noScore === 5) {
        console.log('Game over! Final score — Yes:', yesScore, 'No:', noScore);
        alert(`Game over!\nYes: ${yesScore} | No: ${noScore}`);
        clickme.removeEventListener('click', myFunction); // ✅ 关键:移除监听器
        clickme.disabled = true; // 可选:视觉禁用按钮,提升用户体验
      }
    }

    // 启动游戏:仅注册一次监听器
    function startGame() {
      clickme.addEventListener('click', myFunction);
      console.log('Game started. Click the button to play.');
    }

    // 立即启动
    startGame();
  </script>

⚠️ 重要注意事项:

  • removeEventListener() 的参数必须与 addEventListener() 完全一致:包括事件类型('click')、回调函数引用(myFunction,不能是匿名函数或箭头函数),否则移除失败;
  • 不要将 myFunction 声明为内联匿名函数(如 clickme.addEventListener('click', () => { ... })),否则无法在外部准确引用并移除;
  • 推荐添加 button.disabled = true 配合移除监听器,避免用户误点产生 UI 不一致;
  • 若需支持“重新开始”,应封装 startGame() 和 resetGame(),并在重置时先移除旧监听器再注册新监听器。

通过精准控制事件监听器的生命周期,你无需跳出函数作用域,也能实现清晰、可维护、符合 Web 标准的游戏状态管理。

相关专题

更多
java中break的作用
java中break的作用

本专题整合了java中break的用法教程,阅读专题下面的文章了解更多详细内容。

2025.10.15

3120

7

java break和continue
java break和continue

本专题整合了java break和continue的区别相关内容,阅读专题下面的文章了解更多详细内容。

2025.10.24

827

6

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

0

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

0

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

0

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

16

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习