[자바스크립트] 타이머 함수 정리 (setTimeout, setInterval, clearTimeout, clearInterval)

1. setTimeout(함수, 시간)

일정 시간 후 함수 실행

• 첫번째 인자: 실행할 함수
• 두번째 인자: 해당 시간 후 첫번째 인자로 받은 함수를 실행 (밀리세컨즈로 표기)

예제

3초후에 console창에 maple이라는 문자열을 표시한다

setTimeout(() => {
  console.log(‘maple’)
}, 3000)

 

2. setInterval(함수, 시간)

시간 간격마다 함수 실행

• 첫번째 인자: 실행할 함수
• 두번째 인자: 해당 시간 간격마다 첫번째 인자로 받은 함수를 실행 (밀리세컨즈로 표기)

예제

3초마다 console창에 maple이라는 문자열을 표시한다

setInterval(() => {
  console.log(‘maple’)
}, 3000)

 

3. clearTimeout(timeoutID)

설정된 Timeout 함수를 종료

• 인자: setTimeout의 리턴값인 timeoutID (setTimeout의 리턴값을 변수로 받아 setTimeout 함수의 인자로 넣어준다)

예제

setTimeout의 리턴값을 timer 변수로 받아 h1 태그가 클릭되었을때 clearTimeout 함수로 해당 타이머 함수를 종료시켜준다.

const timer = setTimeout(() => {
  console.log(‘maple’)
}, 3000)

const h1El = document.querySelector(‘h1’)

h1El.addEventListener(‘click’, () => {
  clearTimeout(timer);
})

 

4. clearInterval(intervalID)

설정된 Interval 함수를 종료

• 인자: setInterval의 리턴값인 intervalID (setInterval의 리턴값을 변수로 받아 clearInterval 함수의 인자로 넣어준다)

예제

setInterval의 리턴값을 timer 변수로 받아 h1 태그가 클릭되었을때 clearInterval 함수로 해당 타이머 함수를 종료시켜준다.

const timer = setInterval(() => {
  console.log(‘maple’)
}, 3000)

const h1El = document.querySelector(‘h1’)

h1El.addEventListener(‘click’, () => {
  clearInterval(timer);
})