Web API

DOM(Document)

XHR(XmlHttpRequest) - ajax, fetch, axios

timeout - setTimeout, setInterval

이것들은 개발자가 접근할수없는, 호출만 가능한 스레드이다. (노드의 경우 C++ API)

function sleep(delay) {
  var start = Date.now();
  while (Date.now() < start + delay);
}

setTimeout(() => {
  console.log("start");
  sleep(10000);
  console.log("end");
}, 10);

위의 코드를 보면, setTimeout이 별도스레드에서 실행된다고 가정하면,

브라우저 콘솔에 이 코드를 붙여넣고 기능을 작동시켜보자.(버튼을 누른다던지)

end가 콘솔에 찍히기전에는 어떠한 동작도 실행되지않는다.

이것은 별도스레드에서 작동하는게 아니라,

싱글스레드인 이벤트루프와 큐를 통해 작동하고 있는 것을 확인할 수 있다.

하지만 fetch, XHR, worker API는 백그라운드 스레드에서 동작한다.

나머지 setTimeout, setInterval, RequestAnimationFrame, Promise는 메인 스레드 이벤트 루프다.

어차피 나중에 코드가 실행되는 것이므로, web api에 무거운 로직이 들어가서

오래걸리는게 싫다면 아래의 워커 api를 사용하면 된다.

worker API

이것은 js의 싱글스레드의 한계를 극복할수있게 도와주는 api이다.

별도의 워커스레드에서 스크립트를 실행한다.

---

setTimeout, setInterval

setTimeout, setInterval은 비동기로 함수를 실행시킬 수 있다.

setTimeout(callback, N)은 타이머id를 반환하고 대략(일반적으로 +4ms) {N}ms 후에 callback을 실행시킨다.

setInterval은 setTimeout과 유사하지만 함수호출을 쌓는다.

지정한 시간마다 함수를 실행시켜준다.

실행하는 코드가 일정시간 동안 블럭되도 계속 함수를 호출하기때문에 계속 쌓인다.

따라서 의도했던 실행주기를 보장할 수 없다.

블럭되는 코드를 해결하려면 recursive를 이용하자.

function somefunc() {
  setTimeout(somefunc, 1000);
}

이렇게하면 함수 호출이 쌓이지도 않고, 제어하기도 쉽다.

마지막으로, 타이머를 모두 쓰고나면 리턴받은 타이머id로 clearTimeout을 해주자.