javascript - 回调函数中的引用

Question

我试图通过回调函数传递一个对象，onUpdateTween( groups[i], this );但它没有给我正确的对象。它只给了我来自 groups 数组的最后一个对象。我该如何解决这个问题？

function transform( duration ) {    
   for ( var i = 0; i < groups.length ; i ++ ) {                    

      new TWEEN.Tween(object.rotation)
      .to( rot , duration )
      .easing( TWEEN.Easing.Exponential.InOut ) 
      .onUpdate( function() {
                   onUpdateTween( groups[i], this );
                 })
      .start();                 

   }    
}

Answer 1

您应该创建一个本地范围以封装此变量：

function transform( duration ) {    
   for ( var i = 0; i < groups.length ; i ++ ) {                    

      new TWEEN.Tween(object.rotation)
          .to( rot , duration )
          .easing( TWEEN.Easing.Exponential.InOut ) 
          .onUpdate( updateTween(i, this) )
          .start();                 

   }    
}

function updateTween(index, object) {
    return function() {
        onUpdateTween( groups[index], object );
    }
}

Answer 2

只需在循环中调用一个函数：

function transform( duration ) {    
    for ( var i = 0; i < groups.length; i ++ ) {
        transformGroup( groups[i] );
    }

    function transformGroup( group ) {
        new TWEEN.Tween(object.rotation)
            .to( rot, duration )
            .easing( TWEEN.Easing.Exponential.InOut ) 
            .onUpdate( function() {
                onUpdateTween( group, this );
            })
            .start();                 
    }    
}

每次调用该transformOne()函数时，它都会创建一个包含group参数的闭包，以便onUpdate()处理程序获取正确的组。

或另一种方法来做同样的事情：

function transform( duration ) {    
    for ( var i = 0; i < groups.length; i ++ ) {
        transformGroup( groups[i], duration );
    }
}

function transformGroup( group, duration ) {
    new TWEEN.Tween(object.rotation)
        .to( rot, duration )
        .easing( TWEEN.Easing.Exponential.InOut ) 
        .onUpdate( function() {
            onUpdateTween( group, this );
        })
        .start();                 
}    

无论哪种方式都可以。

是this在那里获得你需要的价值，还是这也是一个问题？

Answer 3

function transform( duration ) {    
   for ( var i = 0; i < groups.length ; i ++ ) {                    
      with({i:i}) {
          new TWEEN.Tween(object.rotation)
          .to( rot , duration )
          .easing( TWEEN.Easing.Exponential.InOut ) 
          .onUpdate( function() {
                       onUpdateTween( groups[i], this );
                     })
          .start();                 

       }
   }
}

:D