0

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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
Jleger91
  • 13
  • 3

1 Answers1

0

"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.

traktor
  • 17,588
  • 4
  • 32
  • 53
  • Or add them with the `once` flag set to true so that they get automatically cleaned up. Although that's still more wasteful than just setting up a listener once, beforehand. – Mike 'Pomax' Kamermans Aug 08 '23 at 23:51
  • @Mike'Pomax'Kamermans Good point and certainly true. For a repetitive event with fixed processing however I would personnally still recommend adding the event listener outside of the loop. – traktor Aug 08 '23 at 23:55
  • 1
    absolutely, so would I – Mike 'Pomax' Kamermans Aug 08 '23 at 23:58
  • Thank for for suggesting the addEventListeners as the problem. I've cleaned up some of them. How about this one? self.addEventListener('click', e => { This one refers to any clickable[i] that has been clicked This eventListener is happens anytime anything is clicked – Jleger91 Aug 09 '23 at 00:18
  • Depends on where `bgm8` is being created, if it's also part of that loop then it's normal to set the listener there (though for what it actually does a listener isn't needed). My point being, we don't know what OP actually does, so we can't and shouldn't answer. – Kaiido Aug 09 '23 at 00:23
  • @Kaiido the OP stated in the question it was part of an animation loop. I found no reason to ask for confirmation. – traktor Aug 09 '23 at 00:25
  • Yes but, as I said if the – Kaiido Aug 09 '23 at 00:27
  • The audio element is created outside of the loop. I learned that the eventListener for bgm is not necessary at all for the music to repeat so I removed all of them :D The only problem now is how to manage the events clickable addEventlistener which is set over and over again in every room the player enters for all clickables. Quickly there must be thousands of event listeners Perhaps I should add an event listener for all individual room messages and clickable events outside of any loop – Jleger91 Aug 09 '23 at 00:31
  • I like the {once: true} idea but I use Microsoft Edge and hear that it doesn't work with Microsoft edge. – Jleger91 Aug 09 '23 at 00:37
  • Edge has [supported the `once` option since October 2018](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#browser_compatibility) - unless users haven't run update for 5 years it shouldn't be a problem. [Event delegation](https://stackoverflow.com/q/1687296/5217142), where click event listeners look at the event object to see what was clicked, may have potential to facilitate handling click events in rooms - if you are unfamiliar with the technique it's worth learning about. – traktor Aug 09 '23 at 01:09