JavaScript의 루프 기반 클릭 처리기가 때때로 예기치 않은 값을 표시하는 이유는 무엇입니까?

루프에서 클릭 이벤트 처리: 클로저 함정 이해

루프가 포함된 여러 요소에 클릭 핸들러를 할당할 때 다음 사항에 유의해야 합니다. JavaScript의 폐쇄 메커니즘에 대해 설명합니다. 일반적인 실수는 콜백 함수를 사용하지 않고 루프에 클로저를 만드는 것입니다. 이로 인해 예기치 않은 동작이 발생할 수 있습니다.

제공된 코드 조각에서:

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

예상되는 동작은 #mydiv3을 클릭하면 "3을 클릭했습니다."가 표시된다는 것입니다. 그러나 코드는 루프의 전역 변수인 i 변수를 잘못 사용하고 있습니다. 결과적으로 i 변수는 최종 값 20을 보유하여 잘못된 경고 메시지를 발생시킵니다.

루프에서 클릭 핸들러를 할당하는 올바른 방법은 콜백 함수를 사용하는 것입니다. 이러한 함수는 i 변수에 대한 새로운 범위를 생성하여 루프의 각 반복이 자체 i 인스턴스를 갖도록 보장합니다.

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

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

ES6를 사용하는 경우 또 다른 최신 솔루션은 let 키워드를 활용하여 다음을 수행하는 것입니다. 루프가 반복될 때마다 지역 변수를 만듭니다.

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

이 방법이 더 깔끔하고 이해하기 쉽습니다. 각 클릭 핸들러에 고유한 i 변수가 있으므로 폐쇄 문제를 제거하고 루프에서 클릭 이벤트를 처리할 때 올바른 동작을 보장합니다.

위 내용은 JavaScript의 루프 기반 클릭 처리기가 때때로 예기치 않은 값을 표시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!