setTimeout, setInterval

setTimeout, setInterval함수는 이벤트루프에 콜백함수를 추가하는 역활을 하고 호출하는 것은 이벤트루프에 위임한다.

function sayHi(who, phrase) {
  alert( who + ' 님, ' + phrase );
}
setTimeout(sayHi, 1000, "홍길동", "안녕하세요.");

setTimeout(() => alert("World"));
alert("Hello"); // Hello , World

이벤트루프는 말그대로 루프를 돌고있는 함수이며 처리할 이벤트가 있으면 처리하도록 되어있다.

그러나 자바스크립트 엔진은 코드블럭내 코드들을 전부 처리한후 더이상 처리할 코드가 없을때 이벤트루프에게 처리권한을 주기때문에 이벤트루프는 처리할이벤트가 아무리 많아도 엔진으로부터 권한을 받아야 처리가 가능한 것이다.

setInterval함수는 구조적으로 정확한 시간으로 반복되지 않는다.

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100);
}, 100);

위와 같이 setTimeout으로 반복을 구현하는 것이 좋다.

이벤트루프에 콜백도 다른 객체를 참조하고 있다면 해당객체는 루프가 처리될때까지 가비지콜렉션대상이 되지 않는다.

브라우저 환경에서 실제 대기 시간은 0이 아니다.

let start = Date.now();
let times = [];

setTimeout(function run() {
  times.push(Date.now() - start);

  if (start + 100 < Date.now()) alert(times); 
  else setTimeout(run);
});
// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100

setTimeout함수의 대기시간을 0으로 설정해도 이벤트루프에의해 처리됨을 설명했다.
위와 같은 반복적인 setTimeout함수의 경우 5번회차부터는 최소 4ms의 지연시간이 발생되도록 자바스크립트규칙이 있음을 유의하자. (하위호환이유)