setInterval 을 알아보자

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 하는데 여기서 대표적인 것이 setInterval 와 setTimeout 이다. 

 

[setInterval vs setTimeout] 

•  setInterval : 일정 시간 간격을 두고 함수를 실행하는 방법 
•  setTimeout : 일정 시간이 지난 후에 함수를 실행하는 방법

[setInterval]  

이 메서드는 간격(interval)을 고유하게 식별할 수 있는 interval ID를 반환하기 때문에 clearInterval() 함수를 호출하여 적절히 제거하고 사용하여야 깨끗하게 코드를 작성할 수 있다. 

 

[문법]

setInterval(callback, delay);

 

• callback: 반복해서 실행하고 싶은 함수.
• delay: 함수가 실행될 시간 간격을 밀리초 단위로 지정한다. 1000은 1초를 의미한다.

[적용 예시] 

 var typingEffect;
  var previousText = "";
  var fullAnswer ;  -> 이건 통신을 통해 실시간으로 String 데이터를 받아와서 이렇게 함 
  
  typingEffect = setInterval(function() {
    if (previousText != fullAnswer) {
      let curText = previousText + fullAnswer.substr(previousText.length, 1);
     
      document.getElementById("typingDiv").innerHTML = curText;
      
      previousText = curText;
    } else if (previousText == fullAnswer) {
      clearInterval(typingEffect);
    }
  }, 100);