콜백 함수 참조

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

을

로 전화 할 때마다 10 함수의 경우 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); 
    } 
}