为什么多次调用一个动画函数会导致它跳过三个js中的动画？答案

【问题标题】：Why does calling an animation function multiple times cause it to skip animations in three js?为什么多次调用一个动画函数会导致它跳过三个js中的动画？
【发布时间】：2019-08-01 16:25:19
【问题描述】：

我想重复一个动画组（球体移动，然后是矩形），然后在名为 expected_output 的 div 中写入重复的次数。但由于某种原因，它跳过了动画，即动画没有开始。

这里是功能代码：

  var j = 1
  var fieldNameElement = document.getElementById("expected_output");
  function animator_repeat(){ 
    const animationClip = new THREE.AnimationClip(null,3, [track1]);
    const animationClip1 = new THREE.AnimationClip(null,3, [track]);
    const animationAction = mesh.userData.mixer.clipAction(animationClip);
    const animationAction1 = cube.userData.mixer.clipAction(animationClip1);

    animationAction.setLoop(THREE.LoopRepeat ,1);
    animationAction.play();
    mesh.userData.mixer.addEventListener( 'finished', () => {

      animationAction1.setLoop(THREE.LoopRepeat ,1);
          animationAction1.play(); 
          cube.userData.mixer.addEventListener( 'finished', () => {
          if(j<6){
             fieldNameElement.textContent = "Number: "+(j+1).toString();
             animator_repeat() 
             j = j+1 
            }
          });
     } )
  }

这里是 jsfiddle： https://jsfiddle.net/xgnj4fbh/6/

你可以看到它跳过，3,4

有人可以解释发生了什么问题吗？

谢谢

【问题讨论】：

标签： javascript animation three.js

【解决方案1】：

这是因为每次动画结束时您都在添加新事件。每次调用animator_repeat()，网格获得一个新的完成事件，每次网格完成时，立方体都会获得一个新的完成事件，当立方体完成时它会调用animator_repeat()。

所以第二次立方体完成，它运行完成事件 3 次，将 j 从 2 直接添加到 5。

解决方案是在添加新事件之前删除旧事件，或者添加命名函数而不是匿名函数。

【讨论】：