回調函數中的引用

Question

我想通過回調函數傳遞一個對象onUpdateTween(groups[i], this);但它沒有給我正確的對象。它只給我組數組的最後一個對象。我該如何解決這個問題？

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 ++) { 
     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 2

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

Answer 3

您應該創建一個本地範圍，以封裝這個變量：

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