[JS] 타이머 함수

타이머 함수 

setTimeout(함수, 시간): 일정 시간 후 함수 실행

setInterval(함수, 시간): 시간 간격마다 함수 실행

clearTimeout(): 설정된 timeout 함수를 종료

clearInterval(): 설정된 interval 함수를 종료

 

1. setTimeout / clearTimeout

setTimeout(function () {
  console.log('내가 타이머다')

}, 3000) //밀리세컨드(ms) 3초

앞에서 배웠던 화살표 함수를 사용해보자. 

setTimeout(() => {
  console.log('내가 타이머다')

}, 3000) //밀리세컨드(ms) 3초

(편안) 함수를 호출하면 3초후에 '내가 타이머다' 가 호출됨

 

반면,

클리어타임아웃은 셋타임아웃을 종료시킨다.

셋타임아웃을 실행하면 특정한 셋타임아웃 값이 반환이 되는데 그것을 timer라는 변수로 만들고

클리어 타임아웃이라는 함수에다가 받아서 정지 시킬 수 있다.

 

그럼, 특정글씨를 '클릭'하면 타임아웃이 멈추는 예제를 만들어보자.

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

addeventlistner라는 메소드를 추가해서 첫번째 인수는 'click'을 추가하고, 두번째 인수는 익명의 함수를 넣는다. clearTimeout을 통해서 종료시켜 줄 수 있는데,

위쪽 코드에 setTimeout이 실행되면서 타이머라는 변수로 해당하는 정보가 반환되기때문에 타이머라는 변수를 clearTimeout의 인수로 사용하면 클릭을했을때 종료가 된다.

 

2. setInterval / clearInterval

const timer = setInterval(() => {
  console.log('내가 타이머다')

}, 3000) //밀리세컨드(ms) 3초

setInterval이라는 함수는 지속적으로 3초마다 함수가 실행된다.

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

이번에도 종료 시켜줄수있는 clearInterval 함수를 넣어보자.

h1을 클릭하면 종료 시킬 수 있다.