setInterval(), clearInterval() 그리고 콜백()

함수를 주기적으로 반복적으로 실행 및 종료하기 위해서 setInterval() 과 clearInterval() 함수를 사용한다.

setInterval()

* setInterval(콜백함수, 시간) : '시간'을 간격으로 '콜백함수'를 반복호출하는 함수이다.
* return 값으로 고유하게 interval을 식별하는 intervalID를 갖는다?
  → 나중에 clearInterval()로 고유 interval ID를 제거해서 반복호출을 중단 시킬 수 있다.
* 함수를 반복호출하다가 잠시 중단 후 다시 시작하고 싶다면??
  (1) setInterval 함수의 반환값을 변수에 할당해두고,
  (2) clearInterval(변수)를 호출하여 반복을 중단하고,
  (3) 다시 setInterval로 재시작해주면 된다.
  
* setInreval()함수는, 일정시간 주기로 반복적으로 함수나 코드를 수행하는 함수이다.
  (1) 이 함수는 다음의 매개변수를 입력받는다.
  ** function : 주기적, 반복적으로 실행할 함수
  ** 시간(optional) : 시간간격 (1초 = 1000밀리세컨드)
  ** function parameters(optional) : 첫번째 파라미터의 함수에 전달할 파라미터를 나열
  									ex) param1, param2, param3, ....
  (2) 이 함수는 다음 값을 리턴한다.
  ** intervalID : 이 값은 반복작업을 종료하기 위해 호출하는 clearInterval()함수의 파라미터로 쓰인다.

콜백함수?

• 다른 함수가 실행을 끝낸 뒤 실행 되는, callback되는 함수.
• 함수를 만들 때, parameter를 함수로 받아서 쓸 수 있는데 그 함수는 callback이다.
• 자바스크립트에서 함수는 object라고 말한다. 그래서 함수는 다른 함수의 인자로 쓰일수도, 어떤 함수에 의해 리턴 될 수도 있다. 이런 함수를 고차함수 라고 한다.
• 결국, 인자로 넘겨지는 함수를 = callback()함수라고 한다.
• 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을때 시스템에서 호출하는 함수이다.!
• 필요한 이유 : 변수의 유효범위(scope), 동기/비동기처리
  동기 : 하나의 요청이 오면 완료가 된 후에 다음 요청을 실행하는 방식 (순차적 로직흐름)
  비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식 (동시효율적 처리가능, 즉시응답X.때문에 예상밖 결과나올수도 있음)
• 콜백함수는 때로는 가독성이나 코드재사용 면에서도 사용된다.
• 비동기방식으로 작성된 함수를 동기처리하기 위해서도 필요하다.

(1) 콜백함수의 기본형태이다.
const function = (callback) => {
  callback();
}
const callback = () => {
  console.log('콜백이다.');
}
function(callback);

::: 결과 | 콜백이다.

(2) introduce함수를 실행하면, callback자리를 새로운함수 function(name)으로 지정해주면서 함수 안에서 callback(fullName)으로 실행되는 함수가 된다.
const introduce = (lastName, firstName, callback) => {
  const fullName = lastName + firstName;
  callback(fullName);
}
const introduce = ('최', '익준', function(name)) => {
  console.log(name);
};

::: 결과 | 최익준

clearInterval()

* clearInterval()함수는, setInterval()함수에 의해 실행 된 반복 작업을 종료하는 함수이다. 이 함수는 다음의 매개변수를 입력 받는다.
	** intervalID : setInterval()함수가 리턴한 id이다.

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

//타이머
let timer;

//'시작'버튼을 누르면 실행된다.
const startClock = () => {
  
  // 1초마다 실행 될 함수 (현재시간을 출력한다)
  const clock = () => {
    const div = document.getElementById('result');
    div.innerText = new Data();
  }
  
  // 1초마다 clock()함수를 실행시킨다.
  // 1000밀리세컨드(1초)마다 clock()함수를 실행한다.
  // 이 함수가 리턴하는 값은 timer변수에 저장되어, clearInterval()함수의 파라미터로 전달된다.
  timer = setInterval(clock, 1000);
}

// '종료'버튼을 누르면 실행된다.
const stopClock = () => {
  
  // timer의 반복실행을 종료한다.
  // 파라미터로 입력받은 timer를 종료한다.
  clearInterval(timer);
}

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

// 타이머
let timer;

// '시작'버튼을 누르면 실행된다.
const startClock = () => {
  
  // 1초마다 실행 될 함수 (현재시간을 출력함)
  const clock = (msg1, msg2) => {
    const div = documetn.getElementById('result');
    div.innerText = msg1 + new Date() + msg2;
  }
  
  // 1초마다 clock()함수를 실행시킨다.
  // clock()함수는 msg1, msg2 이렇게 두개의 파라미터를 입력받는다.
  // setInterval()의 세번째 이후 파라미터로는 clock()함수에 전달할 파라미터를 전달한다. 
  timer = setInterval(clock, 1000, '현재시간은 ', ' 입니다');
}

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

setInterval 중단/재시작 방법

1. setInterval()함수의 반환값을 변수에 할당하여 반복시작
	* let 변수 = setInterval(콜백함수, 시간);
2. clearInterval(변수)로 반복 중단
	* clearInterval(변수);
3. setInterval()함수의 반환값을 변수에 재할당하여 재시작
	* 변수 = setInterval(콜백함수, 시간);


👉🏻 예제코드
// 1000ms마다 callback함수를 호출할 수 있다.
let interval = setInterval(callback, 1000);

const callback = () => {
  console.log('a');
}

// 이 반복을 해제하려면, clearInterval()을 사용하여 반복호출 해제
clearInterval(interval);

// 다시 반복호출하려면 ?? 다시 변수에 담으면 됨.
interval = setInterval(callback, 1000);