setInterval中addEventListener无法触发问题求助

你遇到的问题核心是：element.animate()创建的Web Animations API动画，不会触发元素的animationend事件——这个事件仅对CSS @keyframes定义的传统动画生效。

修正方案 #

监听animate()返回的Animation实例的finish事件即可：

var attack1 = setInterval(function(){
    weapon1.style.visibility = "visible";
    // 保存动画实例
    const attackAnim = weapon1.animate(attack1Animation, attackTiming);
    // 监听动画完成
    attackAnim.onfinish = () => {
        console.log("Animation ended");
    };
    // 或者用addEventListener写法
    // attackAnim.addEventListener('finish', () => console.log("Animation ended"));
}, 10000/unit1.attack_speed);

额外提醒 #

• 若使用addEventListener，每次setInterval执行都会新增一个回调，可能导致动画结束时重复执行日志逻辑，建议用onfinish直接覆盖的方式更稳妥；
• 确认attackTiming配置包含有效的时长属性（比如duration），如果动画时长设为0或未定义，会瞬间完成，可能看不到预期的日志输出。

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