자바스크립트 타이머 함수

setTimeout(함수, 시간) : 일정 시간 후 함수 실행
setInterval(함수,시간) : 시간 간격마다 함수 실행
clearTimeout(): 설정된 Timeout 함수를 종료
clearInterval() : 설정된 Interval 함수를 종료

const timer = setTimeout(() => {
  console.log('하이');
}, 3000);

const h1El = document.querySelector('h1');
h1El.addEventListener('click', () => {
  clearTimeout(timer);
});

위의 코드는 3초 후 콘솔로그에 '하이'라고 나오게 하는데,

index.html의 h1 태그를 누르면 설정된 timeout함수가 종료되어서

하이 라고 나오지 않는다.

const timer = setInterval(() => {
  console.log('하이');
}, 3000);

const h1El = document.querySelector('h1');
h1El.addEventListener('click', () => {
  clearInterval(timer);
});

위의 코드는 3초마다 콘솔로그에 '하이'라고 나오게 하는데,

index.html의 h1 태그를 누르면 설정된 timeout함수가 종료되어서

하이 라고 나오지 않는다.