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

我想重复一个动画组（球体移动，然后是矩形），然后在名为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 
            }
          });
     } )
  }

var j=1
var fieldnamelement=document.getElementById（“预期的_输出”）；
函数animator_repeat（）{
const animationClip=新的三个.animationClip（null，3，[track1]）；
const animationClip1=新的三个.AnimationClip（null，3，[track]）；
const animationAction=mesh.userData.mixer.clipAction（animationClip）；
const animationAction1=cube.userData.mixer.clipAction（animationClip1）；
设置循环（3.LoopRepeat，1）；
animationAction.play（）；
mesh.userData.mixer.addEventListener（'finished'，（）=>{
animationAction1.setLoop（三个循环重复，1）；
动画动作1.play（）；
cube.userData.mixer.addEventListener（'finished'，（）=>{
如果（j这是因为每次动画完成时都要添加新事件。
每次调用
animator\u repeat（）
时，
mesh获得一个新的完成事件，每次mesh完成时，cube都会获得一个新的完成事件，当cube完成时，它会调用
animator\u repeat（）

因此，第二次立方体完成时，它运行完成事件3次，将j从2增加到5

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