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
'FE' 카테고리의 다른 글
일반 함수와 화살표 함수가 this를 정의하는 범위 (0) | 2021.11.07 |
---|---|
생성자 함수와 ES6 Classes클래스 / 객체의 로직이 동일하게 반복될 때 (0) | 2021.11.06 |
호이스팅을 이용해 로직 파악을 빠르게 (0) | 2021.11.06 |
즉시실행함수IIFE 사용방법 (0) | 2021.11.06 |
화살표 함수 표현 방법, 사용 조건 (0) | 2021.11.06 |