[JavaScript] 타이머 함수 setIntervel() / setTimeout()

 

1. setInterval() / clearInterval

setInterval() 함수는 일정 시간 간격으로 코드를 반복 실행 하는 함수이다.

첫 번째 인자는 반복 실행하고자 하는 코드, 두 번째 인자는 시간 정보 (단위: ms)로 설정한다.

 

clearInterval() 함수는 타이머 동작을 중지시키는 함수이다.

let timer = setInterval(() {
	console.log("일정 시간 코드 반복");
}, 1000)

clearInterval(timer);

 

2. setTimeout() / clearTimeout

setInterval() 함수는 지정한 시간 간격에 코드가 딱 한 번 실행되는 함수이다.

첫 번째 인자는 한 번 실행하고자 하는 코드, 두 번째 인자는 시간 정보 (단위: ms)로 설정한다.

 

clearTimeout() 함수는 타이머 동작을 중지시키는 함수이다.

let timeOut = setTimeout(() {
	console.log("지정 시간에 코드 실행");
}, 1000)

clearTimeout(timeOut);

 

 

 

아래는 setTimeout()과 setInterval()함수를 사용한 예제이다.

1. setTimeout()로 2초 뒤에 안에 있는 코드가 실행되게 한다.

2. setInterval()로 배열 cakeArr을 1초에 1씩 증가시킨다.

3. i 값이 거짓일 경우 clearInterval()로 스스로를 호출 시켜 중지한다.

setTimeout(function delCake() {

  // 배열 저장
  let cakeArr = Array.from(document.querySelectorAll("article#lights, div#candle-body, div#cream, div.chiffon, div#cake-bottom, h3#next-text"));
  cakeArr = cakeArr.reverse();
  let i = 0;

  // 배열을 지정한 시간마다 차례로 불러오게 함
  let runCake = setInterval(function() {

    cakeArr[i].classList.remove("displayNone");
    i++;

    if (i == cakeArr.length) {
      i = 11;
      clearInterval(runCake);
    } 
  }, 1000);

}, 2000);