- setTimeout(함수, 시간): 일정 시간 후 함수 실행
- setInterval(함수, 시간): 시간 간격마다 함수 실행
- clearTimeout(): 설정된 Timeout 함수를 종료
- clearInterval(): 설정된 Interval 함수를 종료
※시간은 ms를 사용합니다.
일정 시간 후 함수가 실행되도록 만듭니다.
setTimeout(function () {
console.log('0seo!')
}, 3000)
// 3000ms = 3s, 3초 후 함수 실행
setTimeout(() => {
console.log('0seo!')
}, 3000)
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초에 한번씩 콘솔창에 `0seo!`를 출력
const timer = setInterval(() => {
console.log('0seo!')
}, 3000)
//1. setInterval 실행으로 반환된 특정한 타이머값을 변수에 저장
const timer = setInterval(() => {
console.log('0seo!')
}, 3000)
//2. h1요소 클릭시 setInterval함수 정지.
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
clearInterval(timer)
})
콜백(Callback)함수는 함수의 인수로 사용되는 함수를 의미합니다. 바로 앞에서 사용한 setTimeout(함수, 시간) 함수가 바로 그 예가 될 수 있습니다.
콜백 함수는 특정한 실행 위치를 보장해주는 용도로 주로 활용됩니다.
function timeout(callback) {
// callback은 timeout 함수의 매개변수로 콜백함수를 인수로 받아줌
setTimeout(() => {
console.log('0seo!')
callback()
// 실행 위치를 보장!
}, 3000)
}
timeout(() => {
console.log('Done!')
})
// timeout이라는 함수의 인수로 화살표 함수를 넣어줌(콜백)
만약, 특정한 실행 위치를 보장해주는 용도로 사용된다는 내용에 대한 이해가 부족하다면 아래 비동기처리에 대해 정리해놓은 글에서 도움을 받을 수 있습니다.