동기와 비동기

동기와 비동기를 간단하게 표현하자면 동기는 순차적으로 일을 처리하는 것이고, 비동기는 동시에 일을 처리하는 것이다. 자바스크립트는 기본적으로 싱글 스레드(프로세스 내에서 실행되는 흐름의 단위)로 동기적으로 처리하지만, 비동기적으로도 처리하는 것도 가능하다.

Time API

시간을 다루는 web API로 비동기적으로 실행되는 API이다.
return 값: 임의의 타이머 ID
setTimeout(callback, millisecond)
일정 시간이 지난 후에 내부 함수를 실행하는 API

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

코드를 불러오면 1000ms후에 콜백함수인 function()이 실행된다.

clearTimeout(timerId)
setTimeout의 타이머를 종려, 수로 setTimeout의 ID값이 주어진다.

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

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

매개변수로 1. 콜백 함수, 2.반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)가 주어진다.
return 값: 임의의 타이머 ID

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

clearInterval(timerId)
setInterval 타이머를 종료, 매개변수로 setInterval 타이머의 아이디값이 주어진다.

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

Callback으로 비동기 제어하기

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();

console.log(`아래와 같이 Callback 함수를 통해 비동기 코드의 순서를 제어할 수 있습니다!`);

위 함수는 비동기 API인 setTimeout을 동기적으로 실행시키기 위한 방법이다. setTimeout의 안에 함수는 setTimeout에서 지정한 시간만큼 기다린뒤 실행되는데, 거기에서 callback 함수를 호출시켜 그 다음 함수가 실행될 수 있도록 한다.

그 외에도 promise와 async의 방법이 있지만, 분량이 많아 따로 적을 것이다.