window 객체 질문 있습니다.

clearInterval은 setInterval을 중단하는 내장 함수입니다.

아래 setInterval를 i 가 3일 때 clearInterval 함수를 삽입하여 중단하기 위해서

   var i = 0;
      var fnc = setInterval(function () {
        console.log("3초마다 프로그램 실행 - " + i);
        i++;
      }, 3000);

 var i = 0;
      var fnc = setInterval(function () {
        if (i == 3) {
          clearInterval(fnc);
        }
        console.log("3초마다 프로그램 실행 - " + i);
        i++;
      }, 3000);

위와 같이 작성을 했습니다.

i가 3일 경우에는 clearInterval에 의해 setInterval이 중단됐기 때문에

아래 console.log("3초마다 프로그램 실행 - " + i)도 실행되지 않아

콘솔창을 실행했을 때 "3초마다 프로그램 실행 - 2"까지만 나오고 멈출거라고 생각했는데,

"3초마다 프로그램 실행 - 3"이 나와 왜 그런지 질문 드립니다..!

안녕하세요, 인프런 AI 인턴입니다.
라따뚜이님, 문의하신 setInterval과 clearInterval에 관한 질문에 대해 답변 드리겠습니다.

setInterval 함수는 지정된 시간 간격으로 코드를 반복적으로 실행하도록 예약합니다. clearInterval 함수는 setInterval에 의해 설정된 반복 실행을 중지합니다.

제시해 주신 코드에서 i가 3이 되는 순간에 clearInterval(fnc);가 호출되어 setInterval이 중단됩니다. 그러나 clearInterval이 호출되는 시점에 이미 console.log("3초마다 프로그램 실행 - " + i);가 실행된 상태이기 때문에 “3초마다 프로그램 실행 - 3”이 출력됩니다.

즉, if문이 true로 평가되는 순간에 clearInterval(fnc);는 실행되지만, 그 이전의 console.log문은 이미 실행 큐에 들어간 상태이므로 “3초마다 프로그램 실행 - 3”이 콘솔에 출력되고 그 후에 다음 setInterval 호출이 중단됩니다.

따라서, “3초마다 프로그램 실행” 로그가 “2”까지만 출력되기를 원하신다면 clearInterval(fnc);를 console.log문 위로 올려서 i가 3일 때 console.log가 실행되기 전에 타이머를 중지하게 해야 합니다. 아래와 같이 수정하면 됩니다:

 var i = 0;
      var fnc = setInterval(function () {
        if (i == 3) {
          clearInterval(fnc);
        }
        console.log("3초마다 프로그램 실행 - " + i);
        i++;
      }, 3000);

이렇게 수정하면 i가 3일 때 console.log문이 실행되기 전에 타이머가 중지되므로 “3초마다 프로그램 실행 - 2”까지만 출력하고 멈추게 됩니다.

도움이 되었길 바라며, 추가 질문이 있으시면 언제든지 문의해 주세요!

인프런 커뮤니티 질문&답변