Why is aframe animation complete event firing multiple times

Question

Hello I am new to aframe and I am creating a component where when I click on a plane some animation occurs and color of plane change. It is a very simple learning application, but I see that animation__complete is fired multiple times 1st time for 1 time second time twice and so on I do not understand what an I doing wrong I have attached the log of the file here link to project is https://glitch.com/~amethyst-lamprey-mltmsu585o also this is my first time posting question on stack overflow

Console log output:

about to emit fadein

(index):43 fadeincompleted

(index):35 about to emit fadein

2(index):43 fadeincompleted

(index):35 about to emit fadein

3(index):43 fadeincompleted

(index):35 about to emit fadein

4(index):43 fadeincompleted

(index):35 about to emit fadein

5(index):43 fadeincompleted

(index):35 about to emit fadein

6(index):43 fadeincompleted

Console log image:

Answer 1

It's a jQuery usage issue. Your code is adding new event listeners each time the user clicks resulting in animations triggered multiple times. Move the code below outside of the click handler so it runs only once per animationcomplete__fadein event.

$(loading_sky).on("animationcomplete__fadein",()=>{
   console.log("fadeincompleted");
   el.setAttribute("color","#"+(Math.floor(100000 + Math. random() * 900000) ).toString());
   $.each(scene,(i,e)=>{ e.emit("fadein"); });
   setTimeout(()=>{loading_sky.emit("loadfadeout")},1100)});
 });

Corrected glitch