[JS] 동기와 비동기, 타이머 관련 API⏱ (setTimeout...)

TATA·2023년 1월 17일

JavaScript

목록 보기

19/25

✔️ 동기와 비동기

Blocking vs Non-blocking

🧽 동기(synchronous) = Blocking

특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행한다.

🧽 비동기(asynchronous) = Non-blocking

특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행한다.

✔️ 타이머 관련 API

⏱ setTimeout

일정 시간 후에 함수를 실행
setTimeout(callback, millisecond)

setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 1초 후 실행

⏱ clearTimeout

setTimeout 타이머를 종료
clearTimeout(timerId)

const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);
// setTimeout이 종료됨.

⏱ setInterval

일정 시간의 간격을 가지고 함수를 반복적으로 실행
setInterval(callback, millisecond)

setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 1초마다 '1초마다 실행'이 찍힌다.

⏱ clearInterval

setInterval 타이머를 종료
clearInterval(timerId)

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// setInterval이 종료됨.

✔️ Callback

Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있다.
(비동기 -> 동기화할 수 있다는 의미)

But,
코드가 길어질 수록 복잡해지고 가독성이 낮아지는
Callback Hell이 발생한다는 단점이 있다.

const printString = (string, callback) => {
  setTimeout(function () {
    console.log(string);
    callback();
  }, Math.floor(Math.random() * 100) + 1);
};

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {});
    });
  });
};

printAll();
// A
// B
// C