JS 중급 | setTimeout() / setInterval()

🚀 오늘의 학습 목표

• setTimeout
• setInteval

12. setTimeout()과 setInterval()을 이용한 호출 스케줄링

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

호출 스케줄링을 구현하는 방법은 두 가지 방법이 있다.

• setTimeout 일정 시간이 지난 후 함수를 실행
• setInterval 일정 시간 간격으로 함수를 반복

12.1 setTimeout()

function fn() {
  console.log(3);
}

setTimeout(fn, 3000);

두 개의 매개변수를 받는다.
첫번째 : 일정 시간이 지난 뒤 실행되는 함수명
두번째 : 시간 (위의 예제에서 3000 = 3s 를 의미)

위의 예제를 더 간결하게 바꿔 보자.

setTimeout(function(){
  console.log(3)
}, 3000);

인수가 필요할 경우 시간 뒤에 적어준다.

function showName(name){
  console.log(name);
}

setTimeout(showName, 3000, 'jane'); // 3초뒤 'jane' 출력

12.2 clearTimeout();

clearTimeout(timeoutID)

timeoutID 는 취소하려는 제한 시간의 식별자이다.

clearTimeout()은 예정된 작업을 없애 준다.

const tid = function showName(name){
  console.log(name);
}

setTimeout(showName, 3000, 'jane');

clearTimeout(tId);

setTimeout()은 tId를 반환하는데 이것을 이용하면 이전에 설정한 시간 제한을 취소할 수 있다.
3초가 지나기 전에 clearTimeout() 이 실행되기 때문에 아무 일도 일어나지 않는다.

12.3 setInteval()

function showName(name){
  console.log(name);
}

setInterval(showName, 3000, 'jane'); // 3초마다 'jane' 출력

3초마다 'jane' 이 출력된다.

12.4 clearInterval()

만약, 중단하고 싶다면 clearInterval() 을 실행하면 된다.

function showName(name){
  console.log(name);
}

const tId = setInterval(showName, 3000, 'jane');

clearInterval(tId);

12.5 (주의) delay = 0 ?

그렇다면 0초로 지정하면 어떻게 될까?
setTimeout()보다 실행중인 다른 스크립트가 우선 실행된다.

setTimeout(function(){
  console.log(2);
}, 0);

console.log(1);

/*
1
2
*/

현재 실행중인 스크립트가 종료된 이후 스케줄링 함수를 실행하기 때문이다.
0이라고 적어도 바로 실행되는 것이 아니며, 또한 브라우저는 기본적으로 약 4ms~ 의 대기 시간이 있다. (또는 그 이상)

---

🧑🏻‍💻 예시를 통해 쉽게 이해하기

setInterval() 를 사용하여 1초에 한번씩 접속 시간을 알려주는 함수를 만들어 보자.

let num = 0;

function showTime(){
  console.log(`안녕하세요. 접속한지 ${num++}가 지났습니다.`);
}

const tId = setInterval(showTime, 1000);

5초동안만 알려주도록 코드를 수정해 보자.

let num = 0;

function showTime(){
  console.log(`안녕하세요. 접속한지 ${num++}가 지났습니다.`);
  if (num > 5){
    clearInterval(tId);
  }
}

const tId = setInterval(showTime, 1000);

num 이 5보다 크면 clearInterval() 이 실행되며 스케줄링 함수가 중단 된다.