[Javascript] 타이머 함수와 콜백함수

youngseo·2022년 3월 25일

Javascript

목록 보기

32/46

타이머 함수

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(함수, 시간) 함수가 바로 그 예가 될 수 있습니다.

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

function timeout(callback) {
// callback은 timeout 함수의 매개변수로 콜백함수를 인수로 받아줌
  setTimeout(() => {
    console.log('0seo!')
    callback()
    // 실행 위치를 보장!
  }, 3000)
}

timeout(() => {
  console.log('Done!')
})
// timeout이라는 함수의 인수로 화살표 함수를 넣어줌(콜백)