자바스크립트 스케줄링: setTimeout() 함수와 setInterval() 함수

1. setTimeout() 함수

setTimeout() 함수는 일정한 시간이 경과한 후 함수나 코드를 실행한다. 시간은 밀리 초 단위이다.

테스트를 위한 함수를 작성한다.

function testFunc() {
  alert('testing...');
}

1초 후에 testFunc() 함수가 실행되도록 세팅한다.

setTimeout(testFunc, 1000);

함수에 매개변수가 있는 경우를 살펴 보자.

function add(a, b) {
  sum = a + b;
  alert(a + ' + ' + b + ' = ' + sum);
}

1초 후에 add() 함수가 실행되도록 세팅한다.

setTimeout(add, 1000, 99, 88);

setTimeout() 함수의 세번째 인자와 네번째 인자가 add() 함수에 전달된다.

함수 대신 코드가 실행되도록 해 보자.

setTimeout() 함수의 첫번째 인자로 실행할 코드를 지정한다. 코드의 자료형은 문자열이다.

setTimeout(“alert(‘testing…’)”, 1000);

2. setInterval() 함수

setInterval() 함수는 일정한 시간마다 주기적으로 함수나 코드를 실행한다. 시간은 밀리 초 단위이다.

testFunc() 함수가 3초에 한번씩 반복해서 실행되도록 해 보자.

setInterval(testFunc, 3000);

3. clearTimeout() 함수와 clearInterval() 함수

clearTimeout() 함수는 setTimeout() 함수의 작동을 중단시킨다.

clearInterval() 함수는 setInterval() 함수의 작동을 중단시킨다.

setInterval() 함수의 작동을 중단시켜 보자.

setInterval() 함수를 실행할 때 해당 함수의 ID 를 변수에 저장한다.

var intervalId = setInterval(testFunc, 3000);

30초 후에 setInterval() 함수가 중단되도록 세팅한다.

setTimeout(“clearInterval(intervalId)”, 30000);

clearInverval() 함수의 인자로 intervalId 변수가 사용되었다.