I am facing a challenge with removing event listeners in my code to prevent multiple calls to an event. I need the flexibility to call these functions multiple times without causing conflicts.
Currently, my solution is not effectively removing the event listener from the "imageEvilRace" element. This results in the "killRacer" function targeting and deleting the same image on subsequent calls, even though it should only affect the new target. It seems to retain a reference to the first image even when it shouldn't.
Below are the crucial parts of the relevant functions that pertain to my issue:
function killRacer() {
var listOfRaceImgs = getListOfRaceImages();
var killRacerTimerID = setInterval(moveEvilRaceImage.bind(null, randomRacer), 40);
imageEvilRace.addEventListener("stopKiller", stopMovingKillerImage.bind(null, killRacerTimerID, randomRacer));
}
function moveEvilRaceImage(imageToKill) {
imageEvilRace.dispatchEvent(stopKillerEvent);
}
function stopMovingKillerImage(killRacerTimerID, randomRacer) {
clearInterval(killRacerTimerID);
randomRacer.style.display = "none";
randomRacer.style.left = 0 + "px";
imageEvilRace.src = explosionImageSource;
imageEvilRace.removeEventListener("stopKiller", stopMovingKillerImage);
}