回调函数中的引用答案

【问题标题】：Reference in callback function回调函数中的引用
【发布时间】：2013-04-16 08:42:42
【问题描述】：

我试图通过回调函数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();                 

   }    
}

【问题讨论】：

标签： javascript tween

【解决方案1】：

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

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 是否在那里获得了您需要的价值，或者这也是一个问题？

【讨论】：

【解决方案2】：

你应该创建一个本地范围来封装这个变量：

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

【讨论】：

@t.niese 哦，是的...谢谢！

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

       }
   }
}

【讨论】：

不是with几乎被弃用了吗？至少禁止使用strict mode，不推荐使用。
@t.niese 这就是 lulz 的原因。好吧，它没有被弃用，只是严格不允许。