[Intermediate] 함수(5) - 타이머 함수

1. 함수

5. 타이머 함수

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

setTimeout(function () {
  console.log('OROSY!)
}, 3000)
// 3000ms = 3s, 3초 후 함수 실행

const timer = setTimeout(() => {
  console.log('OROSY!')
}, 3000)
// 위와 같은 함수로 화살표 함수를 이용하여 실행(timer 변수에 저장)

• 예제1) Hello world!를 클릭하면 함수 종료

-HTML-
<h1>Hello world!</h1>

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