[JS] 동기, 비동기 / 호출 스케줄링: setTimeout(), setInterval()

동기(Synchronous)

: 코드가 한 줄씩 순차적으로 실행되는 방식

• 세탁기 한 대
  - 이 빨래가 다 끝나야 다음 빨래 가능

 

 

 

비동기(Asynchronous)

: 코드가 즉시 실행되지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 방식

• 특정 작업(서버 요청, 타이머 등)이 완료되면 콜백 함수를 통해 결과를 처리
• 세탁기 여러 대
  - 이 빨래 돌리면서 다른 빨래도 돌릴 수 있음

 

 

비동기를 다루는 방법

1. 콜백 함수(Callback Function)

• 특정 작업이 완료된 후 호출되는 함수
• 콜백 지옥(Callback Hell) 문제를 야기할 수 있다.

function fetchData(callback) {
  setTimeout(() => {
    callback("데이터");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // "데이터"
});

 

 

 

2. 프로미스(Promise)

• 비동기 작업을 보다 체계적으로 관리할 수 있다.
• then(), catch() 메서드를 이용해 체이닝 가능

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("데이터");
  }, 1000);
});

promise
  .then((data) => {
    console.log(data); // "데이터"
  })
  .catch((error) => {
    console.error(error);
  });

 

 

3. async / await

• 프로미스를 더욱 간편하게 사용할 수 있게 해주는 최신 문법
• 동기식 코드처럼 작성할 수 있어 가독성이 높다

async function fetchData() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터");
    }, 1000);
  });

  let data = await promise;
  console.log(data); // "데이터"
}

fetchData();

 

 

---

호출 스케줄링

 

setTimeout()

: 일정 시간이 지난 후에 콜백 함수를 실행

setTimeout(() => {
                  ...
}, 밀리초);

function sayHi(who, phrase) {
  alert( who + ' 님, ' + phrase );
}

setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); 
// 홍길동 님, 안녕하세요.

 

 

✨ 대기 시간이 0인 setTimeout()

: 현재 스크립트의 실행이 완료된 후 가능한 한 빠르게 원하는 함수를 호출할 수 있다.

• 대기 시간(밀리초)를 0으로 설정 

setTimeout(() => alert("World"));

alert("Hello");
// Hello
// World

 

 

 

clearTimeout()

: setTimeout() 함수로 설정한 호출 스케줄링 취소

• setTimeout()을 호출하면 '타이머 식별자(timer identifier)'가 반환됨
  👉 이 식별자를 사용해서 취소

let timerId = setTimeout(() => {
	alert("아무런 일도 일어나지 않는다.")
, 1000});

alert(timerId); // 타이머 식별자(숫자)

clearTimeout(timerId);// 스케줄링 취소

alert(timerId); // 타이머 식별자(숫자)
// (취소 후에도 식별자의 값은 null이 되지 않는다.)

 

 

 

 

setInterval()

: 일정 시간 간격을 두고 콜백 함수를 실행

• 주기적으로 실행

setInterval(() => {
            ...
}, 밀리초);

 

 

 

clearInterval()

: setInterval() 함수로 설정한 호출 스케줄링 중단

• setInterval()을 호출하면 '타이머 식별자(timer identifier)'가 반환됨
  👉 이 식별자를 사용해서 취소
  

let timerId = setInterval(() => alert('째깍'), 2000);
// 2초 간격으로 출력

setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);
// 5초 후 정지

 

 

 

 

중첩 setTimeout()

: setTimeout()을 반복적으로 호출하여 일정 시간 간격으로 함수를 실행

• 매 반복마다 다음 호출의 지연 간격을 동적으로 조정할 수 있음
  - setInterval() 보다 유연함
  - 호출 결과에 따라 다음 호출을 원하는 방식으로 조정해 스케줄링 할 수 있기 때문
  - 간격이 점점 밀리는 현상을 방지할 수 있음

function repeatDelay() {
  console.log("작업 실행");

  setTimeout(repeatDelay, 1000); 
  // 1초 후에 repeatDelay 함수를 다시 호출
}

repeatDelay();

 

 

	setInterval()	중첩 setTimeout()
지연 시간 조정	고정됨📌	동적으로 조정 가능⭕
실행 시간 포함 여부	포함⭕	포함되지 않음❌
코드 가독성	간결함👍	다소 복잡👎

 

 

---

 

setTimeout과 setInterval을 이용한 호출 스케줄링

 

setTimeout() global function - Web APIs | MDN