[JavaScript] setTimeout과 setInterval을 이용한 호출 스케줄링

'호출 스케줄링(scheduleing a call)'이란 일정 시간이 지난 후에 원하는 함수를 예약실행 할 수 있게 하는 것.

1. setTimeout

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

//func|code :실행하고자 하느 코드로, 함수 또는 문자열 형태. 이 자리에는 함수가 들어감

//[delay] :실행 전 대기시간으로 단위는 밀리초, 기본값은 0

// [arg1], [arg2], ... :함수에 전달될 인수들

function sayHi(who, phrase) {
  alert( who + ' 님, ' + phrase );
}

setTimeout(sayHi, 1000, "이서영", "안녕하세요.");

//1초뒤에 '이서영님, 안녕하세요' 가 출력됨

setTimeout("alert('안녕하세요.')", 1000);
// setTimeout의 첫 번째 인수가 문자열이면 자바스크립트는 이 문자열을 이용해 함수를 만든다.

//하지만 이 방법보다는 화살표 함수를 사용하는 것을 추천!!
setTimeout(() => alert('안녕하세요.'), 1000);

2. clearTimeout으로 스케줄링 취소하기

setTimeout을 호출하면 '타이머 식별자'가 반환되는데, (아래 코드에서는 timeId가 타이머식별자임) clearTimeout에 타이머식별자를 넣어서 setTimeout을 취소할 수 있다.

let timerId = setTimeout(...);
clearTimeout(timerId);

 

3. setInterval

setTimeout함수와 달리,  함수를 주기적으로 실행한다.

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

//setTimeout함수와 동작방식은 동일

함수 호출을 중단하려면 clearInterval(timeId)을 사용하면 됨.

let timerId = setInterval(() => alert('싸발'), 2000);

// 정지
clearInterval(timerId);

4. 중첩 setTimeout

setInterval함수 말고 일정 간격으로 함수를 실행하는 방법

let timerId = setTimeout(function tick() {
  alert('싸발싸발');
  timerId = setTimeout(tick, 2000);
}, 2000);

// 2초후에 tick함수를 실행하게 되는데, tick함수도 2초후에 ('싸발싸발')출려하는 함수이기 때문에
//결과적으로 계속해서 2초마다 '싸발싸발'이 출력됨

5. 대기시간이 0인 setTimeout

setTimeout(func, 0) 이나 setTimeout(func)을 사용하면 setTimeout의 대기시간을 0으로 설정할 수 있다.

이런 특징을 이용하면 현재 스크립트 실행이 종료된 '직후에' 원하는 함수가 실행될 수 있게 할 수 있다.

setTimeout(() => alert("World"));

alert("Hello");

//"Hello"
//"World"

--> setTimeout(()=>alert("World")); 의 의미는 '0밀리초 후에 함수호출하기' 라는 할 일을 '계획표에 기록' 해주는 역할이다.

그런데 스케줄러는 현재 스크립트(alert Hello)의 실행이 종료되고 나서야 '계획표에 어떤 할 일이 적혀있는지 확인하므로 Hello 가 먼저 World가 그 다음에 출력된다.