为什么aframe动画完成事件多次触发答案

【问题标题】：Why is aframe animation complete event firing multiple times为什么aframe动画完成事件多次触发
【发布时间】：2020-02-12 05:55:56
【问题描述】：

您好，我是 aframe 的新手，我正在创建一个组件，当我单击飞机时，会发生一些动画并且飞机的颜色会发生变化。这是一个非常简单的学习应用程序，但我看到 animation__complete 被触发了多次第一次 1 次第二次两次等等我不明白我做错了什么我已在此处附加了文件的日志链接到项目是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

控制台日志图片：

【问题讨论】：

标签： aframe virtual-reality webvr

【解决方案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)});
 });

Corrected glitch

【讨论】：