[Javascript] 함수 반복적으로 실행하기, 종료하기 (setInterval(), clearInterval())

 

Javascript에서 

함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 다음의 함수를 사용합니다.

• setInterval()
• clearInterval()

 

setInterval()

setInterval() 함수는,

일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수입니다.

이 함수는 다음의 매개변수를 입력 받습니다.

• function : 주기적, 반복적으로 실행할 함수
• delay millisecond (optional) : 시간 간격 (밀리세컨드 단위), 1초=1000밀리세컨드
• function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터를 나열합니다.
  ex) param1, param2, param3....

이 함수는 다음 값을 리턴합니다.

• intervalID : 이 값은 반복작업을 종료하기 위해 호출하는 clearInterval() 함수의 파라미터로 쓰입니다.

 

clearInterval()

clearInterval() 함수는,

setInterval() 함수에 의해 실행된 반복 작업을 종료하는 함수입니다.

이 함수는 다음의 매개변수를 입력 받습니다.

• intervalID : setInterval() 함수가 리턴한 id 입니다.

 

 

  setInterval(), clearInterval() 함수로 1초마다 시간 출력하기  

 

<input type='button' value='시작' onclick='startClock()' />
<input type='button' value='종료' onclick='stopClock()' />
<div id='result' />

// 타이머
let timer;

// '시작' 버튼을 누르면 실행된다.
function startClock() {
  
  // 1초마다 실행될 함수 (현재 시간을 출력한다)
  function clock() {
    const div = document.getElementById('result');
    div.innerText = new Date();
  }
  
  // 1초마다 clock() 함수를 실행시킨다.
  timer = setInterval(clock, 1000);
  
}

// '종료' 버튼을 누르면 실행된다.
function stopClock() {
  // timer의 반복실행을 종료한다.
  clearInterval(timer);
}

 

이 예제는

사용자가 '시작' 버튼을 누르면

1초마다 현재 시간을 출력합니다.

사용자가 '종료' 버튼을 누르면

현재 시간 업데이트를 종료합니다.

 

timer = setInterval(clock, 1000);

1000밀리세컨드, 즉 1초마다 clock() 함수를 실행합니다.

이 함수가 리턴하는 값은 timer 변수에 저장되어,

clearInterval() 함수의 파라미터로 전달됩니다.

 

clearInterval(timer);

파라미터로 입력받은 timer를 종료합니다.

 

 

 

  매개변수 있는 함수를 setInterval()로 실행시키기  

 

<input type='button' value='시작' onclick='startClock()' />
<input type='button' value='종료' onclick='stopClock()' />
<div id='result' />

// 타이머
let timer;

// '시작' 버튼을 누르면 실행된다.
function startClock() {
  
  // 1초마다 실행될 함수 (현재 시간을 출력한다)
  function clock(msg1, msg2) {
    const div = document.getElementById('result');
    div.innerText = msg1 + new Date() + msg2;
  }
  
  // 1초마다 clock() 함수를 실행시킨다.
  timer = setInterval(clock, 1000, '현재 시간은 ', ' 입니다');
  
}

// '종료' 버튼을 누르면 실행된다.
function stopClock() {
  // timer의 반복실행을 종료한다.
  clearInterval(timer);
}

 

timer = setInterval(clock, 1000, '현재 시간은 ', ' 입니다');

clock() 함수는 msg1, msg2, 이렇게 2개의 파라미터를 입력받습니다.

setInterval()의 3번째 이후 파라미터로는 clock() 함수에 전달할 파라미터를 전달합니다.

 

---

 

setInterval(), clearInterval() 함수를 사용하여

주기적으로 특정 코드구문이나 함수를 실행하는 방법을 알아보았습니다.