ch7 - 2. setInterval

Index

Index 1. setInterval 2. clearInterval 3. setInterval 과 clearInterval 을 버튼으로 제어해보기

1. setInterval

setTimeout 함수와 setInterval 함수의 차이는 명확합니다. setTimeout 함수가 일정 시간 뒤에 함수나 지정된 코드를 실행한다면, setInterval 함수는 일정 시간의 간격을 두고 함수나 지정된 코드를 실행합니다. 예제로 확인해봅시다.


const funcTime2=() => {console.log('go!')}
setInterval(funcTime2 , 3000);

위 코드는 'go!'라는 문자열을 함수가 실행되고 3초마다 콘솔에 출력하는 함수입니다. setTimeout 함수처럼 funcTime 함수를 첫 번째 인자로, 그리고 3000의 숫자를 두 번째 인자로 집어넣었는데요, 숫자의 단위도 밀리 세컨드로 setTimeout 함수와 사용법이 매우 유사합니다. 마찬가지로 실행하자마자 반환되는 숫자 값 역시 setInterval의 ID 값입니다.

2. clearInterval

setTimeout 챕터에서 다루었듯이 setInterval 함수도 그 실행을 취소하는 함수가 존재합니다. 그것이 바로 clearInterval 함수입니다. 사용방법 역시 동일합니다.


const funcTime2=() => {console.log('go!')}
let timeId2 = setInterval(funcTime2 , 3000);/*setInterval 함수의 ID를 timeId2 변수에 저장합니다.*/
clearInterval(timeId2);

3. setInterval 과 clearInterval 을 버튼으로 제어해보기

앞서 setTimeout 부분을 이해하시는데 어려움이 없었다면 이번 챕터도 문제없으실 겁니다! 그렇다면 이제 html 과 함께 좀 더 직관적인 UI를 만들어봅시다.


<div class="btns">
  <button type="button" class="btn_go">GO</button>
  <button type="button" class="btn_x">CANCEL</button>
</div>


const btns= document.querySelector('.btns');
const funcTime=() => {
      console.log('go!');
    }  

let timeId;
btns.addEventListener('click', (event) => {
  if(event.target.classList.contains('btn_go')){
      timeId = setInterval(funcTime ,1000);
  }else if(timeId !== undefined && event.target.classList.contains('btn_x')){
      clearInterval(timeId);
  }
});

위의 코드를 분석해봅시다. GO, CANCEL 두 가지 버튼이 존재하고 두 버튼은 btns라는 클래스를 가진 div로 묶여 있습니다. btns 요소는 이벤트 리스너가 달리고 앞서 배운 event.target을 통해 btn_go와 btn_x 요소에 이벤트를 위임합니다. btn_go에는 1초마다 funcTime 함수를 실행시키는 setInterval 함수가 연결되어 있고, btn_x에는 setInterval 함수의 ID를 매개변수로 하여 그 실행을 취소할 수 있는 clearInterval 함수가 연결되어 있습니다. 이제 우리는 버튼을 통해 일정 시간마다 'go!' 문자열을 출력 시키거나 정지할 수 있는 인터랙티브한 웹페이지를 가지게 되었습니다.