英文:
Why does my Javascript Canvas Point & Click game get slower after a few minutes?
问题
我尝试禁用了一些功能，包括所有音频效果和背景音乐元素，但游戏仍然变慢。我没有正确重置 Timeouts 和 Intervals 吗？嗯...在 update 函数中唯一调用 addEventListener 的地方是：
这段代码是在动画更新循环中调用的：
bgm8.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
嗯...我对 DOM 的使用非常重要。几乎每个页面的一半都是 document.getElementById。这样做会导致游戏在几分钟后变得越来越慢吗？
也许问题真的是 setTimeout 和 setInterval？这是我用于 setTimeout 的一个示例代码：
setTimeout(() => {
document.getElementById("showerDoor1").play();
setTimeout(() => {
document.getElementById("erlik1").play();
}, 1000);
}, 1000);
是不是将 import 语句放在相关脚本文件的顶部有问题？
这段 import 代码来自 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';
我尝试禁用了大部分功能，但游戏在几分钟后仍然卡顿。我真的不明白为什么。
英文:
I tried disabling some features including all audio effects and background music elements but it still gets slower. Am I not resetting Timeouts and Intervals properly? Hmm... the only place where addEventListener is called in update is
This code is called inside an animation update loop:
bgm8.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
}, false);
Hmm... I have a very heavy emphasis on DOM usage. Nearly half of every page is covered in document.getElementById. Would this slow the game down more and more after a few minutes though?
Maybe it really is setTimeouts and setIntervals that is the problem? Here is one example of code I use for a setTimeout:
setTimeout(() => {
document.getElementById("showerDoor1").play();
setTimeout(() => {
document.getElementById("erlik1").play();
}, 1000);
}, 1000);
Could it be placing import statements at the top of relative script files?
This import code is from 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';
I tried disabling most of the features and the game still lags after a few minutes. I just don't get it.
答案1
得分: 0
这段代码被调用在一个动画更新循环中，看起来是个问题。在循环中不要重复添加相同事件的事件监听器，除非移除之前的事件监听器（需要引用监听函数来移除）。否则，随着越来越多的事件监听器被添加到同一个事件上，处理速度会变慢或停止。
解决方法是在任何循环之外添加事件监听器，或者如注释所述，在添加事件监听器时提供一个 {once: true} 的选项对象。
英文:
"This code is called inside an animation update loop:" looks like the problem. Don't add event listeners for the same event in a loop without removing the previous event listener (which will need a reference to the listener function to remove it). Otherwise, as even more and more event listeners are added for the same event, processing slows down or stops.
The solution is to add event listeners outside of any loop or, as commented, supply a {once: true} options object when adding the event listener.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论