clearInterval()未正常生效 setInterval定时器叠加导致功能异常
问题根因
故障本质是setInterval定时器重复创建、未及时清理导致的逻辑叠加。
当前实现中selectelwynnforestzone()函数每次被触发(包括首次点击区域进入、击杀敌人后重生下一个的逻辑回调、重复点击区域按钮)时,都会新生成一个定时器周期执行tankattackenemy伤害计算逻辑,但之前创建的旧定时器没有被销毁,会一直留在事件循环里持续运行。
每重生一次敌人就多一个定时器同时算伤害:第一次进图是1倍伤害,重生1次就2个定时器打2倍伤害,重生次数越多伤害倍数越高,就会出现敌人刚刷新生命值直接掉到0的现象。
修复步骤
- 将定时器ID变量的声明挪到
selectelwynnforestzone()函数的外层作用域,不要在函数内部用var声明该变量——函数内部声明的变量是局部变量,每次调用函数都会生成新的变量实例,根本无法获取之前创建的定时器ID,自然没法执行清除操作。 - 每次新建攻击定时器之前,必须先判断是否存在已运行的同逻辑定时器,如果有就先用
clearInterval清除,再创建新的定时器,从根源避免多个同逻辑定时器同时运行。
修正后的核心代码参考:
// 定时器变量声明在外层作用域,全局持有定时器ID let refreshtankattackinterval = null; function selectelwynnforestzone(){ // 新建定时器前先清理已有实例,防止叠加 if (refreshtankattackinterval !== null) { clearInterval(refreshtankattackinterval); } refreshtankattackinterval = setInterval(tankattackenemy, tankattackspeed); // 原有区域加载、敌人生成、属性初始化的逻辑保持不变即可 }
额外注意:所有会被重复触发创建的周期定时器(包括攻击逻辑、buff判定、自动回血类逻辑),都要遵循「先清除、后创建」的原则,不然不仅会出现数值计算异常,堆积的无用定时器还会持续占用内存,导致页面运行越来越卡顿。
内容的提问来源于stack exchange,提问作者Jon Loftus
相关产品推荐
相关产品推荐

