[2주차] 비동기와 타이머

동기 : 앞선 작업이 완전히 끝난 후에 다음 작업이 실행되는 것을 의미

비동기 : 동기가 아니라는, 즉 앞선 작업이 끝나지 않았는데도 다음 작업이 실행되는 것을 말한다.

자바스크립트에서는 작성한 코드 순서와 다르게 실행되는 코드를 비동기라고 생각해도 된다. 에디터에 작성한 코드 순서와 실제 작동 순서가 다르므로 어떤 원리로 이렇게 작동하는지 익혀야 한다.

비동기의 대표적인 예로 타이머가 있다. 자바스크립트는 지정한 시간(밀리초) 뒤에 지정한 작업 수행하는 타이머 함수를 제공한다.

1. setTimeout()

setTimeout()에 첫 번째 인수로 넣는 함수는 특정 작업(지정한 시간까지 기다리기) 이후에 추가로 실행되므로 콜백 함수로 볼 수 있다. 두번째 인수는 밀리초 단위이므로 초에 1000을 곱해 넣는다. 그러면 첫 번째 인수로 넣은 함수가 지정한 밀리초 후에 실행 된다.

setTimeout(함수, 밀리초);

다음 코드를 콘솔에 입력해 보면 2초 후에 메시지가 표시된다. 메시지가 출력되기 전에 나오는 숫자는 setTimeout() 함수에서 반환하는 타이머 아이디이다. 타이머 아이디는 뒤에 다시 소개한다.

setTimeout(() => {
	counsole.log('2초 후에 실행됩니다.');
}, 2000};
< 3
2초 후에 실행됩니다.

다음과 같이 첫 번째 인수에 넣는 함수를 외부에서 가져올 수도 있다.

const callback = () => {
	console.log('2초 후에 실행됩니다.');
}
setTimeout(callback, 2000);

 

setTimeout() 함수를 비동기라고 하는 이유는 setTimeout() 뒤에 나오는 코드가 더 먼저 실행되기 때문이다. 다음 코드는 얼핏 보면 콘솔에 1, (2초 기다리고) 2, 3 순서로 찍실 것 같지만 실제로는 1, 3, (2초 기다리고) 2가 찍힌다. 즉, 코드의 작성 순서와 실제 실행 순서가 다르다.

console.log(1);
setTimeout(() => {
	console.log(2);
}, 2000};
console.log(3);
// 1, 3, 2

 

다음과 같이 setTimeout()을 여러번 호출해도 모두 비동기함수이기에 콘솔에는 내가 먼저, 1, 2, 3, 순서로 찍힌다.

setTimeout(() => {
	console.log(3);
}, 5000};
setTimeout(() => {
	console.log(2);
}, 3000};
setTimeout(() => {
	console.log(1);
}, 2000};
console.log('내가 먼저');
// 내가 먼저, 1, 2, 3

그렇다면 setTimeout()에 넣은 함수는 언제 실행될까? 정답은 동기 코드가 모두 실행되고 난 뒤이다.

 

setTimeout()은 한 번만 실행되는데, 여러 번 실행하고 싶을 수도 있다. 그럴 때는 setTimeout()의 콜백 함수에서 다시 setTimeout()을 호출하면 된다.

const callback = () => {
	console.log('2초마다 실행됩니다.');
	setTimeout(callback, 2000);
}
setTimeout(callback, 2000);

setTimeout() 내부의 callback()에서 다시 setTimeout()을 호출하므로 2초마다 setTimeout()이 반복해서 실행된다.

 

2. setInterval()

자바스크립트는 자체적으로 반복 기능을 수행하는 setInterval() 함수를 제공한다. setInterval() 함수는 지정한 시간마다 주기적으로 지정한 함수를 실행한다.

setInterval(함수, 밀리초);

 

다음 코드를 실행하면 2초마다 한 번씩 메시지가 출력된다.(실제로는 1번 출력되고 옆에 횟수를 나타내는 숫자가 찍힌다.)

setInterval(() => {
	console.log('2초마다 실행됩니다.');
}, 2000};

 

3. clearTimeout()과 clearInterval()

setTimeout()과 setInterval() 함수는 웹 페이지를 닫을 때까지 계속 실행되므로 중간에 끄는 방법이 필요하다. 이럴 때 사용하는 타이머 정리 함수들이 있다.

setTimeout() 함수는 clearTimeout() 함수로, setInterval() 함수는 clearInterval() 함수로 실행을 취소할 수 있다. setTimeout()과 setInterval() 함수는 해당 타이머를 나타내는 타이머 아이디를 반환한다. 이 값을 clearTimeout()과 clearInterval() 함수에 넣으면 취소할 타이머를 지정할 수 있다.

const 아이디 = setTimeout(함수, 밀리초);
clearTimeout(아이디);
const 아이디 = setInterval(함수, 밀리초);
clearInterval(아이디);

단, clearTimeout() 함수는 setTimeout() 함수의 콜백 함수가 아직 실행되지 않았을 때만 취소할 수 있다. 시한 폭탄을 생각해 보시오. 이미 터지고 난 뒤에는 취소해도 의미가 없다.

 

다음 코드의 결과를 예상해 보시오. setTimeout()의 밀리초가 0이다. 즉, 바로 실행하라는 뜻이다.

const timerId = setTimeout(() => {
	console.log('0초 뒤에 실행됩니다.');
}, 0};
console.log('내가 먼저');
clearTimeout(timerId);

콘솔에서 실행해 보면 '내가 먼저'만 출력되고 '0초 뒤에 실행됩니다.'는 출력되지 않는다. setTimeout()에서 지정한 시간이 0초인데 왜 콜백 함수가 실행되지 않은 걸까?

setTimeout()이 비동기 함수라는 점을 기억해야 한다. setTimeout()의 콜백 함수보다 아래에 있는 코드가 더 먼저 실행된다. 그래서 console.log()와 clearTimeout()이 먼저 실행되므로 setTimeout()의 콜백 함수는 실행되기 전에 취소된다.