타이머 함수

1. 타이머함수의 종료

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

• setInterval(함수, 시간): 시간 간격마다 함수 실행
• clearTimeout(): 설정된 Timeout 함수를 종료
• clearInterval(): 설정된 Interval 함수를 종료 ※시간은 ms를 사용합니다.

1) setTimeout(함수, 시간)

일정 시간 후 함수가 실행되도록 만듭니다.

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

setTimeout(() => {
  console.log('0seo!')
}, 3000)

2) clearTimeout()

setTimeout의 timer를 종료시켜줄 수 있는 기능을 가지고 있습니다. setTimeout 실행으로 반환된 특정한 타이머값을 변수에 저장한 후 그 변수를 clearTimeout의 인수로 사용해 실행시킵니다.

//1. setTimeout 실행으로 반환된 특정한 타이머값을 변수에 저장
const timer = setTimeout(() => {
  console.log('0seo!')
}, 3000)

//2. h1요소 클릭시 setTimeout함수 정지.
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearTimeout(timer)
})

3) setInterval(함수, 시간)

일정시간 간격마다 함수가 실행되도록 합니다.

//3초에 한번씩 콘솔창에 `0seo!`를 출력
const timer = setInterval(() => {
  console.log('0seo!')
}, 3000)

4) clearInterval()

//1. setInterval 실행으로 반환된 특정한 타이머값을 변수에 저장
const timer = setInterval(() => {
  console.log('0seo!')
}, 3000)

//2. h1요소 클릭시 setInterval함수 정지.
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearInterval(timer)
})

2. 콜백(Callback)함수

콜백(Callback)함수는 함수의 인수로 사용되는 함수를 의미합니다. 바로 앞에서 사용한 setTimeout(함수, 시간) 함수가 바로 그 예가 될 수 있습니다.

콜백 함수는 특정한 실행 위치를 보장해주는 용도로 주로 활용됩니다.