[Javascript & Jquery] 리스너 중첩으로 인해 오류 발생 시

# 문제 : 

javascript를 on('click'), on('change')를 많이 사용해본 사람은 알것이다. 

해당 부분으로 테스트를 했을떄 console.log에 여러번 중첩되어서 호출 되는 경우가 발생 하는 경우를.

이런 경우엔 과부화가 걸리거나, 원하는 대로 동작을 안하거나 한다. 

그래서 꼭 리스너를 사용해주게 되면 반대로 기능이 중단 될때 리스너를 없애줘야 한다.

 

# 해결 :

.on('change', async function () {

위에 처럼 되어 있는 것을 

 

아래 처럼 바꿔준다. 

 

 

# 방법 1

 

.eq(0).off('change').on('change', async function() {

 

# 방법 2

.eq(0).on('change', async function handler() {
  // Your event handler code here

  // Off the event listener after it triggers once
  $(this).off('change', handler);
});

 

 

#방법 3 

.eq(0).on('change', async function() {
  // Your event handler code here

  // Remove the listener right after execution
  $(this).off('change');
});

 

 

여러번 동작을 진행해보자. 동작이 점점 이상하게 흘러간다? 

그럴때 콘솔 로그를 찍어보자. 한번의 동작이 세번씩 불러오고 네번 리스너 중첩 된 수 만큼 동작이 될 것이다.

그럴 때, 리스너를 없애주자.