fetch 함수와 비동기 실행

🎀  fetch함수 이렇게 동작한다.

fetch는 비동기 처리되는 함수이기 때문에, 서버의 response가 오기 전까지는 다른 작업을 진행하고, 그 후 콜백 함수를 실행한다.

console.log('Start!');

fetch('https://www.google.com')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End'); 

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

🎀 비동기 함수들

📌  setTimeout()

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

📌  setInterval()

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

📌  addEventListener 메소드

🎀  이렇게 동작한다.

// 1번
let num = 1;

// 2번
setTimeout(() => {
    num = 2;
    console.log(num);
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

1. setTimeout은 설정한 밀리세컨즈만큼의 시간이 경과했을 때 실행된다. setTimeout 되기 전에 우선 num = 3이 실행되어 3이 먼저 출력된다.
2. 그 다음 num = 2가 실행되고, 2가 출력된다.