setTimeout

function sayHi(phrase, who) {
  alert( phrase + ', ' + who);  
}
setTimeout(sayHi, 1000, "Hello", "John");
//setTimeout(sayHi(), 1000);      //sayHi()가 실행되면 undefined가 리턴됨. 잘못됨!!

• 최소 delay시간 후에 콜백 함수를 실행시킨다.
• sayHi부분에 코드를 직접 블록으로 감싸서 넣을순 있지만 재활용이 불가하기 때문에 권장하지 않는다.

let timerId = setTimeout(() => alert("never happens"), 1000);
clearTimeout(timerId);

• 위와 같이 timerid를 받아서 스케쥴링을 취소시킬수도있다.
• 이 timerid는 브라우저에서는 숫자이지만 다른 환경(Node.js등)에서는 다른것일수도있다.

setInterval

// 2초마다 반복
let timerId = setInterval(() => alert('tick'), 2000);

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

• 실제로 실행시켜보면 콘솔에 timerId가 9가 찍힌다.
• tick이라는 얼럿이 두번뜨고나서 stop얼럿이 한번 뜨며 종료된다.

재귀 setTimeout

• setInterval와 마찬가지로 setTimeout을 재귀적으로 쓰면 함수를 주기적으로 호출할 수 있다.

let timerId = setTimeout(function tick() {
  alert('tick');
  timerId = setTimeout(tick, 2000);
	/*
		...code
	*/
}, 2000);

• 만약 code부분에 10초가 걸리는 작업이 있다고 해보자.
• 처음 setTimeout이 호출되면 브라우저에게 2초뒤에 tick()을 실행시켜달라고 요청한다.
• 브라우저는 2초뒤에 큐에 tick()을 넣고 상황에 따라 스택에 tick()을 push한다.