루프에 정의 된 HTML5 다중 드롭 타겟

Question

이것은 여기에있는 것과 비슷한 문제인 것처럼 보이지만 제공되는 솔루션을 이해하지 못하고 있습니다. Multiple drop events in HTML5

Ext JS 라이브러리를 사용하여 하나의 끌기 소스에서 여러 놓기 대상을 설정하려고합니다. notifyEnter에 대한 클로저를 정의하면 항상 경고 "("디버깅 목적으로 경고하도록 변경했습니다) 변수 "i"를 사용하는 것처럼 나타납니다. 자바 배경에서 오는 내 직감은 루프 내에서 최종 변수를 정의하고 closure를 정의하기 전에 i 또는 playerLocationPanel을 할당하여이를 해결하는 것이지만 유효한 해결책은 아닙니다. .

이것은 8-10 년 동안 Javascript에 대한 첫 번째 진출이므로 도움을 주시면 대단히 감사하겠습니다. 당신의 "notifyEnter"기능이있는 당신이 "I"를 전달하는 별도의 함수를 작성해야하고, 핸들러 함수를 반환 :

/**** 
* Setup Drop Targets 
***/ 
var playerPanelDropTargets = new Array(); 
var dropTargetEls = new Array(); 
for(var i=0;i<=5; i++){ 
    dropTargetEls[i] = playerLocationPanels[i].body.dom; 

    playerPanelDropTargets[i] = Ext.create('Ext.dd.DropTarget', dropTargetEls[i], { 
     ddGroup: 'GridExample', 
     notifyEnter: function(ddSource, e, date){ 
      // The problem here is that it always calls, specifically playerLocationPanels[i] 
      // and i is always going to be 1 more than the top of the loop. 
      //playerLocationPanels[i].body.stopAnimation(); 
      //playerLocationPanels[i].body.highlight(); 
      alert(i); 

     } 
    }); 
} 

Answer 1

당신은 당신이 참조하는 질문에서 언급 한 바와 같이 동일한 기본 접근 방식을 취할 필요 . 이런 식으로 뭔가 :

playerPanelDropTargets[i] = Ext.create('Ext.dd.DropTarget', dropTargetEls[i], { 
    ddGroup: 'GridExample', 
    notifyEnter: makeHandler(i) 
}); 

// ... 

function makeHandler(i) { 
    return function(ddSource, e, date){ 
     alert(i); 
     // etc. 
    }; 
} 

핸들러 함수를 만들 수있는 또 다른 함수를 호출하여, 각 핸들러 함수가 "I"의 값의 복사본이 있는지 확인합니다.