TIL 34. 비동기 함수

console.log("Start");

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });

console.log("End");

//start -> End > result 순으로 console에 출력된다.

fetch 함수는 비동기적으로 실행되는 함수다. 첫번째 console.log가 실행되고 fetch함수가 request를 보내면 .then 메소드는 콜백함수를 등록한다. 그리고 response가 도착해 콜백함수가 실행되기 전에 바로 다음 줄에 있는 코드를 실행시킨다. 위 예시의 코드 실행 순서를 정리하면 아래와 같다.

1. console.log('Start');
2. fetch 함수(리퀘스트 보내기 및 콜백 등록)
3. console.log('End');
4. 리스폰스가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행

한번 시작된 작업이 완료되기 전에 바로 다음 코드로 실행이 넘어가고 나중에 콜백이 실행돼 작업이 마무리되는 것을 비동기 실행이라고 한다. 비동기 실행은 앞코드의 작업이 완료되어야 다음 코드가 실행되는 동기 실행에 비해 동일한 작업을 더 빠른 시간내에 처리할 수 있다는 점에서 효율적이다.

전통적인 비동기 함수

1.setTimeout()

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

console.log("a");

setTimeout(() => {
  console.log("b");
}, 2000);

console.log("c");

// a -> c -> b

setTimeout은 () => { console.log('b'); 이 콜백의 실행을 2초 뒤로 미룬다. 그래서 이코드를 실행하면 a,c가 먼저 출력되고 2초가 지난 후 b가 출력된다.

fetch 함수에서는 콜백이 실행되는 조건이, '리스폰스가 도착했을 때'였다면, setTimeout에서 콜백이 실행되는 조건은, '설정한 밀리세컨즈만큼의 시간이 경과했을 때'이다. 어쨌든 둘 다 콜백의 실행을 나중으로 미룬다는 점에서는 비슷하다.

2.setInterval()

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

console.log("a");

setInterval(() => {
  console.log("b");
}, 2000);

console.log("c");

// a -> c -> b -> b -> b .....

setInterval 함수는 등록된 콜백의 실행의 밀리세컨즈마다 한 번씩 실행시킨다.

3.addEventListener()

btn.addEventListener("click", function (e) {
  console.log("Hello Codeit!");
});

이렇게 클릭과 같은 특정 이벤트가 발생했을 때 실행할 콜백을 등록하는 addEventListener 메소드도 비동기 실행과 관련이 있다. 파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건(클릭 이벤트 발생)이 만족될 때(마다) 실행되기 때문이다.