JS. 타이머 함수

타이머 함수

일정 시간이 지난 후 특정 코드 또는 함수가 실행될 수 있도록 해주는 함수와 일정 시간마다 함수가 실행될 수 있도록 해주는 함수를 말한다.

타이머 함수의 종류

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

const timer = setTimeout(() => {
  console.log('imae!') // imae!
}, 3000) // 1000ms

• 3초 후에 'imae!'가 출력된다.
• ms 단위를 사용한다.

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

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

• setTimeout 함수가 실행되는 것을 종료하는 함수이다.
• 3초가 되기 전에 h1 태그를 클릭하면 'imae!'가 출력되지 않는다.

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

const timer = setInterval(() => {
  console.log('imae!') // imae!
}, 3000) // 1000ms

• 3초마다 'imae!'가 출력된다.
• ms 단위를 사용한다.

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

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

• setInterval 함수가 실행되는 것을 종료하는 함수이다.