setInterval과 addEventListener

🚩clearInterval과 removeEventListener는 종료 대상이 다르다.

clearInterval =>  setInterval 자체를 종료
removeEventListener =>  콜백함수를 종료

 

1.  window 메서드 (setInterval)

setInterval 자체를 종료한다. clearInterval(intervalID)

/* 지역변수 num을 참조하는 내부함수를 외부로 전달했으므로 클로저 */
(function() {
  let num = 0;
  let intervalID = null;

  intervalID = setInterval(function(){
    if (++num >= 5) {
      clearInterval(intervalID);
    }
    console.log(num);
  }, 100);
})();

// 1 2 3 4 5

// 콜백함수 inner로 분리하면
(function() {
  let num = 0;
  let intervalID = null;
  
  let inner = function(){
    if (++num >= 5) {
      clearInterval(intervalID); // setInterval 자체를 종료
    }
    console.log(num);
  };
  intervalID = setInterval(inner, 100);
})();

 

2.  DOM 메서드 (addEventListener)

콜백함수를 종료한다. removeEventListener('click', inner)

/* 지역변수 count를 참조하는 내부함수를 외부로 전달했으므로 클로저 */
(function() {
  let count = 0;
  let button = document.createElement('button');
  button.innerText = '클릭';
  
  button.addEventListener('click', function(){
    console.log(++count, '번 클릭했습니다.');
    if (count >= 5) {
      button.removeEventListener('click', function(){}) // 콜백함수를 종료해야하는데.. 뭘 적지??
    }
  });
  document.body.appendChild(button);
})();

// 콜백함수 inner를 선언해서 해결
(function() {
  let count = 0;
  let button = document.createElement('button');
  button.innerText = '클릭';
  
  let inner = function(){
    console.log(++count, '번 클릭했습니다.');
    if (count >= 5) {
      button.removeEventListener('click', inner) // 콜백함수를 종료
    }
  };
  button.addEventListener('click', inner);
  document.body.appendChild(button);
})();