Почему анимация завершена, событие запускается несколько раз?

Question

Здравствуйте, я новичок в aframe и создаю компонент, в котором при нажатии на плоскость происходит анимация и цвет плоскости меняется. Это очень простое обучающее приложение, но я вижу, что animation__complete запускается несколько раз, 1 раз, 1 раз, 2 раза, и так далее. Я не понимаю, что я делаю неправильно. Я прикрепил журнал файла. https://glitch.com/~amethyst-lamprey-mltmsu585o также это мой первый вопрос о переполнении стека

Вывод журнала консоли:

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

Изображение журнала консоли:

Answer 1

Это проблема jQuery использования. Ваш код добавляет новых слушателей событий каждый раз, когда пользователь нажимает, в результате чего анимация запускается несколько раз. Переместите приведенный ниже код за пределы обработчика click, чтобы он запускался только один раз для события animationcomplete__fadein.

$(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)});
 });

Исправленный глюк