일정 시간 후 원하는 함수를 동작시키는 setTimeout, setInterval

정해진 시간 뒤 코드를 동작하게 하거나, 일정 간격으로 동작하게 할 수 있는 코드 setTimeout 과 setInterval 을 알아본다.

setTimeout()

특정 시간이 경과한 뒤에 특정 코드블록을 한번 실행한다.

let myGreeting = setTimeout(function() { // 지정한 익명 함수 실행
  alert('Hello, Mr. Universe!');
}, 2000) // 2000ms 후 실행.

setTimeout에 반드시 익명 함수일 필요는 없고, 함수를 다른 곳에서 정의하고 참조를 전달할 수도 있다.

// With a named function
let myGreeting = setTimeout(function sayHi() {
  alert('Hello, Mr. Universe!');
}, 2000)

// With a function defined separately
function sayHi() {
  alert('Hello Mr. Universe!');
}

let myGreeting = setTimeout(sayHi, 2000);

특정시간이 경과되기 전에 실행하지 않고 취소하기 위해서는, clearTimeout을 사용한다.

clearTimeout(myGreeting);

setInterval()

각각의 호출 간에 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행한다.

function displayTime() {
   let date = new Date();
   let time = date.toLocaleTimeString();
   document.getElementById('demo').textContent = time;
}

const createClock = setInterval(displayTime, 1000);

반복을 끄고싶을 경우, clearInterval 을 사용한다.

const myInterval = setInterval(myFunction, 2000);

clearInterval(myInterval);

순환 timeouts

setTimeout 내부에, setTimeout 을 이용해 같은 코드를 반복적으로 실행시키는 방법으로, setInterval()을 대체할 수 있다.

let index = 1;
let secondTimeout;
const firstTimeout = setTimeout(function run() {
  console.log(index);
  index++;
  secondTimeout = setTimeout(run, 1000); // 1초마다, firstTimeout 내부의 동작 실행
}, 100);

해당 동작을 멈추고 싶은경우 내부에 있는 secondTimeout을 clearTimeout() 하면 멈추게 된다.

clearTimeout(secondTimeout); // secondTimeout 정지, console.log(index) 이하 라인 중지됨

참고

requestAnimationFrame() : setInterval()의 최신 버전; 그 코드가 실행되는 환경에 관계없이 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.

---

참고 URL

MDN - Cooperative asynchronous JavaScript: Timeouts and intervals

settimeout, setinterval 차이 및 예제

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