为什么我的 Javascript Canvas Point & Click 游戏在几分钟后变得更慢？

Question

我尝试禁用一些功能，包括所有音频效果和背景音乐元素，但速度仍然变慢。我是否没有正确重置超时和间隔？嗯... update 中唯一调用 addEventListener 的地方是

此代码在动画更新循环内调用：

bgm8.addEventListener('ended', function () {
            this.currentTime = 0;
            this.play();
        }, false);

嗯...我非常重视 DOM 的使用。 document.getElementById 覆盖了每个页面的近一半内容。但这会在几分钟后让游戏速度越来越慢吗？ 也许这确实是 setTimeouts 和 setIntervals 的问题？这是我用于 setTimeout 的代码示例：

setTimeout(() => {
                        document.getElementById("showerDoor1").play();
                        setTimeout(() => {
                            document.getElementById("erlik1").play();
                        }, 1000);
                    }, 1000);

是否可以将导入语句放在相关脚本文件的顶部？ 此导入代码来自 room104_init.js:

import { Background } from './background.js';
import { EventZones } from './eventZones.js';
import { ClickEvents } from './clickEvents.js';
import { WaterDrop, Tile } from '../common/roomObjects.js';

我尝试禁用大部分功能，但几分钟后游戏仍然滞后。我就是不明白。

Answer 1

“此代码在动画更新循环内调用：”看起来像问题所在。不要在循环中添加事件侦听器而不删除先前的动画。否则，随着为同一事件添加越来越多的事件侦听器，处理速度会变慢。

解决方案是在任何循环之外添加事件侦听器。