JavaScript 이벤트 리스너에서 변수 값을 유지하는 방법: 블록 범위 변수 또는 클로저?

JavaScript에서 이벤트 리스너의 변수 값을 유지하는 방법

다음 코드 조각을 고려하세요.

<code class="javascript">for (var i = 0; i < results.length; i++) {
  marker = results[i];
  google.maps.event.addListener(marker, 'click', function() {
    change_selection(i);
  });
}

In 이 코드에서 이벤트 리스너에 사용된 i 값은 루프가 종료된 후 항상 results.length의 최종 값입니다. 이 문제를 해결하려면 이벤트 생성 중에 i 값을 이벤트 리스너에 전달해야 합니다.

블록 범위 변수 사용(ES6 이상)

In 최신 브라우저에서는 let 또는 const와 같은 블록 범위 변수를 사용할 수 있습니다. 이러한 변수는 정의된 블록 내에서만 액세스할 수 있습니다. 블록 범위 변수를 사용하면 이벤트 생성 시 i 값이 보존되도록 할 수 있습니다.

<code class="javascript">for (let i = 0; i < results.length; i++) {
  let marker = results[i];
  google.maps.event.addListener(marker, 'click', () => change_selection(i));
}</code>

클로저 생성(이전 브라우저)

블록 범위 변수를 지원하지 않는 구형 브라우저에서는 i 값을 보존하기 위해 클로저를 생성할 수 있습니다. 클로저는 다른 함수를 캡슐화하여 중첩된 범위를 만드는 함수입니다. i를 익명 함수의 첫 번째 인수로 전달함으로써 i의 값을 유지하는 클로저를 생성할 수 있습니다.

<code class="javascript">for (var i = 0; i < results.length; i++) {
  (function (i) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() {
      change_selection(i);
    });
  })(i);
}</code>

블록 범위 변수 또는 클로저 기술을 사용하여 다음을 보장할 수 있습니다. 각 이벤트 리스너는 의도된 i 값을 사용합니다.

위 내용은 JavaScript 이벤트 리스너에서 변수 값을 유지하는 방법: 블록 범위 변수 또는 클로저?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!