[JavaScript] 일정한 시간 간격으로 코드 실행하고 중지시키기 / setInterval(), setTimeout()

일정한 시간 간격으로 코드 실행하기

일정한 시간 간격으로 코드를 실행하는 함수로 setInterval()메서드와 setTimeout()메서드가 있다.
setInterval()은 일정한 시간 간격으로 코드를 반복 실행하고,
setTimeout()는 일정한 시간이 흐른 후에 코드를 한번 실행하고 종료한다.

// 기본형 / 시간 간격은 밀리세컨즈(ms)가 기준이다.
        var 참조 변수 = setinterval(function(){자바스크립트 코드}, 시간간격);
        var 참조 변수 = setTimeout(function(){자바스크립트 코드}, 시간간격);

예시를 들기 위해 변수를 만들어 보았다.

// 예시 변수
var addNumber = 0;
var subNumber = 1000;
var addNumber2 = 0;

이제 위에 만들어진 예시를 사용해 증감시키는 코드를 짜보도록 하겠다.
auto1, auto2, auto3에 setInterval()메서드를 넣고 그 값을 보기 위해 console.log()를 넣어 확인하였다.

auto1에서는 증가식을 넣었는데, 1초마다 1씩 무한대로 증가된다.
auto2에서는 if 문을 넣어 subNumber의 값을 990까지로 제한하였는데 1000에서 1씩 감소하다가 990이 되면 멈춘다.
auto3에서는 3초 뒤에 1번 증가되고 종료된다.

// 1초마다 addNumber를 1씩 증가시킨다.
      var auto1 = setInterval(function () {
        addNumber++;
        console.log("addNumber : " + addNumber);
      }, 1000);

// 1초마다 subNumber를 1씩 감소시킨다.
      var auto2 = setInterval(function () {
        if (subNumber > 990) {
          subNumber--;
          console.log("subNumber : " + subNumber);
        }
      }, 1000);
      
// 3초 뒤에 1번 증감시키고 종료된다.
      var auto3 = setTimeout(function () {
        addNumber2++;
        console.log("addNumber2 : " + addNumber2);
      }, 3000);

반복실행을 멈추고 싶을 때

setInterval()의 반복 실행을 멈추고 싶을 때
: setInterval()의 반복실행을 멈추고 싶을 때에는 clearInterval()메서드를 이용한다. clearInterval()의 소괄호에 setInterval()을 실행하고 있는 참조변수의 이름을 넣으면 해당 반복실행을 종료할 수 있다.

setTimeout()의 반복 실행을 멈추고 싶을 때
: setTimeout()은 원래 정해진 시간 이후에 한 번 코드를 실행하고 자동 종료하지만, 조금만 응용하면 원하는 횟수만큼 재귀호출하여 반복실행하게 만들 수 있다. 이때 횟수를 충족했을 경우 setTimeout()을 멈추고 싶다면clearTimeout()메서드를 이용한다. clearTimeout()의 소괄호에 setTimeout()을 실행하고 있는 참조변수의 이름을 넣으면 해당 반복실행을 종료할 수 있다.

// 기본형
    clearInterval(참조변수)
    clearTimeout(참조변수)

clearInterval()과 clearTimeout을 적용하기 위해 버튼을 하나 만들어보겠다.
버튼에 위의 속성을 적용시키고 클릭했을 경우 반복 실행이 멈추도록 지정하려 한다.
지금까지는 javascript에 작성하였다면
이번엔 html 코드 <button> 안에 onclick이라는 속성을 활용하여 따옴표 안에 clearInterval()를 넣었다.
clearInterval()의 소괄호 안에는 멈추고 싶은 참조변수를 넣으면 되고, 이제 이 버튼을 클릭하면 반복실행이 정지된다.

<button type="button" onclick="clearInterval(auto1)">addNumber 정지</button>
<button type="button" onclick="clearInterval(auto2)">subNumber 정지</button>