자바스크립트 타이머 setTimeout / setInterval 설명

자바스크립트에서 함수를 호출하면 함수가 바로 실행됩니다. 그러나 setTimeout과 setInterval을 사용해 함수 실행을 조정할 수 있습니다. 자바스크립트 엔진은 싱글 스레드로, 타이머 함수는 비동기 처리 방식으로 작동합니다.

setTimeout

setTimeout은 특정 시간이 지난 뒤 함수를 호출합니다. 첫 번째 인자에 실행할 함수를, 두 번째 인자에 지연 시간, 이후 순서의 인자에는 필요한 인자를 전달할 수 있습니다.

setTimeout(() => console.log('Hello!'), 1000);

setTimeout(date => console.log(`Today: ${date}`), 1000, '2020-11-07');

setInterval

setInterval은 특정 간격으로 함수를 반복 호출합니다. 첫 번째 인자에 실행할 함수를, 두 번째 인자에 반복 실행 시간, 이후 순서의 인자에는 필요한 인자를 전달할 수 있습니다. 함수가 호출될 때마다 타이머를 식별할 수 있는 고유한 아이디가 생성되며, clearInterval의 인자에 해당 값을 전달해 함수 반복 횟수를 제어할 수 있습니다.

let count = 1;

const timer = setInterval(() => {
    console.log(count);
  if (count++ === 3) clearInterval(timer);
}, 1000);