[JavaScript] 함수 정리 2 - 타이머함수, 콜백(Callback) 함수,비동기 처리방식

타이머 함수

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

//setTimeout, clearTimeout 사용 예제
const timer = setTimeout(() => {console.log("HI!")},3000)

const h1El=document.querySelector('h1')
h1El.addEventListener('click', () => {
    clearTimeout(timer)
})

 

3초 뒤 HI!가 콘솔창에 출력된다.

 

Timeout멈추기 부분을 누르면 아무것도 출력되지 않는다.

 

//setInterval, clearInterval 사용 예제
const interval=setInterval(() => {console.log("안녕")},1000)

const h2El=document.querySelector('h2')
h2El.addEventListener('click',() => {
    clearInterval(interval)
})

1초마다 안녕이 계속 출력된다.(현재는 9번 출력)

Interval 멈추기 부분을 누르면 더이상 숫자가 올라가지 않는다.

콜백(Callback)

콜백 : 함수의 인수로 사용되는 함수
예를들어 setInterval(함수, 시간) 에서 '함수'를 콜백이라고 한다.

자바스크립트의 비동기 처리방식 문제점을 해결하기 위해 사용한다. 

비동기 방식 : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성

아래 예제를 통해 쉽게 이해할 수 있다. 

//의도는 콘솔창에 3초뒤 kite를 출력한 뒤, Done!을 출력하는 것이다.
function timeout(){
    setTimeout(() => {
        console.log('kite!')
    },3000)
}

function printer(){
    console.log('Done!')
}
timeout();
printer();

그러나 실제 실행결과는 아래와 같다. Done!이 먼저 출력되고 이후 kite가 출력된다. 즉 timeout()함수의 실행이 완료되기 전에 printer()함수가 실행되는 것이다. 이러한 문제점을 해결하기 위해 콜백함수를 사용한다.

아래와 같이 사용할 수 있다.

function timeout(cb){
    setTimeout(() => {
        console.log('kite!')
        cb()
    },3000)
}

timeout(() => {
    console.log('Done!')
})

의도한대로 결과가 잘 나왔다.