1. setTimeout

setTimeout 함수는 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수이다.

아래 예시 코드를 한 번 살펴보자.

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

여기서, setTimeout 함수는 첫 번째 파라미터에 있는 {console.log('b')의 실행을 두 번째 파라미터에 있는 2000 ms 만큼 뒤로 미룬다.

때문에, 이를 출력해보면, 아래와 같이 a와 c가 먼저 실행되고, 약 2000 ms가 지난 후 b가 출력이 되게 된다.

2. setInterval

setInterval 함수는 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수이다.

아래 예시 코드를 한 번 살펴보자.

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

이 코드를 실행시켜보면, 다음과 같이, b를 출력하는 콜백 함수가 2초 간격으로 계속 실행되는 것을 확인할 수 있다.

3. addEventListener

본 글은 비동기 실행 함수에 대한 설명이기 때문에, addEventListener의 자세한 동작 방식에 대해서는 설명을 생략하고자 한다.

만약, addEventListener를 처음 접한다면, 해당 글을 먼저 읽고 오는 것을 추천한다.

addEventListner 함수의 경우, 특정 이벤트가 발생했을 때, 실행할 콜백 함수를 등록하는 method이기 때문에, 비동기 실행 함수에 속한다는 것을 기억해두자.