루프에 클릭 핸들러를 할당할 때 클로저 문제를 어떻게 피할 수 있나요?

일반적인 함정: 루프의 클로저

클릭 핸들러를 여러 요소에 할당하기 위해 루프를 사용하는 경우 함정에 빠지기 쉽습니다. 의도하지 않게 클로저를 생성하는 것입니다. 이로 인해 제공된 JavaScript 코드에서 볼 수 있듯이 예기치 않은 동작이 발생할 수 있습니다.

주어진 예에서 문제는 각 요소의 클릭 핸들러 기능에 있습니다. 이를 루프 내에 포함함으로써 루프에서 변수 i를 참조하는 클로저를 생성합니다. 하지만 i는 iteration마다 변경되기 때문에 click 이벤트가 발생하면 항상 특정 요소에 대해 의도한 값이 아닌 i의 최종 값(이 경우 20)에 접근하게 됩니다.

해결 방법 :

이 클로저 문제를 방지하려면 원하는 값을 캡슐화하는 콜백 함수를 생성해야 합니다. IIFE(즉시 호출 함수 표현식)를 사용하면 다음을 달성할 수 있습니다.

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의 최신 솔루션:

ES6에서는 let 키워드를 사용하여 각 루프 반복에 대한 지역 변수를 만들 수 있습니다. 이렇게 하면 콜백 함수를 사용하여 해결 방법이 필요하지 않습니다.

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

이 솔루션은 더 간결하며 루프에서 클릭 이벤트를 처리하는 동안 잠재적인 종료 문제를 방지합니다.

위 내용은 루프에 클릭 핸들러를 할당할 때 클로저 문제를 어떻게 피할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!