728x90

🚨 타이머 함수

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

*시간 단위는 ms (1000ms는 1초)

 

 

📍 setTimeout

setTimeout( () => {
  console.log('3초뒤 실행')
}, 3000)

 

📍 clearTimeout

const timer = setTimeout( () => {
  console.log('h1을 클릭하면 timer 종료')
}, 3000)

const h1El = document.querySelector('h1');

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

 

 


🚨 콜백 함수 Callback

1. 함수의 인수로 사용되는 함수

2. 실행위치를 보장한다.

 

 

👩‍💻 아래와 같이 코드를 작성할 경우

setTimeout( () => {
  console.log('2초 지났어요')
}, 2000)

console.log('임무 완료')

🤷‍♀️ 콘솔창에서는 이렇게 나온다.

하지만 의도하고 싶은 것은 '2초 지났어요.' 뒤에 '임무 완료'를 실행시키는 것!

 

 

👩‍💻 콜백해보자.

콜백함수를 이용해서 뒤이어 오는 '임무 완료'의 실행위치를 보장해주면 의도한 대로 출력이 가능하다.

 

어떻게 보장하지?

기명함수timer를 만들고 매개변수cb를 할당한 뒤 호출시키고 싶은 위치에 실행cb( )한다.

function timer(cb) {
  setTimeout( () => {
    console.log('2초 지났어요')
    cb()
  }, 2000)
}

timer(() => {
  console.log('임무 완료')
})

정상 출력

 

728x90
+ Recent posts