JavaScript 루프에 클릭 핸들러를 할당할 때 클로저 문제를 방지하려면 어떻게 해야 합니까?

루프 내의 클릭 핸들러 할당에서 클로저 문제 해결

루프의 여러 요소에 클릭 핸들러를 할당할 때 JavaScript의 클로저로 인해 일반적인 함정이 발생합니다. 제공된 코드는 다음 문제를 나타냅니다.

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

이 코드는 클릭이 발생할 때 클릭한 요소의 인덱스를 표시하는 것을 목표로 합니다. 그러나 실제 색인을 표시하는 대신 모든 클릭에 대해 '20을 클릭했습니다'라고 잘못 표시됩니다. 이 동작은 루프에서 생성된 클로저에서 비롯됩니다.

해결책: 콜백 함수 사용

이 문제를 해결하려면 아래와 같이 콜백 함수를 활용할 수 있습니다.

function createCallback( i ){
  return function(){
    alert('you clicked' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( createCallback( i ) );
  }
});

이 업데이트 버전에서는 루프 내에 콜백 함수가 생성됩니다. 이 함수는 'i'의 현재 값을 캡처하여 요소를 클릭할 때 올바른 인덱스가 표시되도록 합니다.

ES6의 let 키워드 활용

ES6 구문을 사용할 수 있는 경우 동일한 결과를 보다 간결하게 달성하기 위한 let 키워드:

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

let 키워드는 'i'가 루프 내에서 로컬 범위로 지정되도록 보장합니다. 종료 문제를 방지하고 각 요소 활성화 시 올바른 클릭 인덱스를 표시합니다.

위 내용은 JavaScript 루프에 클릭 핸들러를 할당할 때 클로저 문제를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!