setInterval 질문입니다.

안녕하세요 beth517님!

이를 이해하기 위해서는 setInterval 함수가 실제로 어떻게 동작하는 지 조금만 더 자세히 알아볼 필요가 있습니다.

setInterval 함수를 작성해 볼까요?

const intervalFunc = function() {
  console.log("I'm Alive!")
}

setInterval(intervalFunc, 1000)

"I'm Alive!"라고 하는 문자열을 출력하는 intervalFunc 함수를 작성하고 setInterval 함수를 사용해서 1초마다 intervalFunc 함수가 반복 실행되도록 작성해 주었습니다.

setInterval은 함수입니다. 그리고 우리는 전달인자로 intervalFunc이라고 하는 함수를 넘겨주고 있죠.

우리는 함수의 전달인자로 넘겨지는 intervalFunc과 같은 함수를 콜백함수(Callback function)이라고 부릅니다.

setInterval 함수의 동작 방식을 정확하게 이야기하자면,

1. 주어진 시간이 지나면 인자로 전달해준 콜백함수를 실행합니다.

2. 함수의 실행이 종료 되었다면, 다시 주어진 시간만큼 딜레이를 발생 시키고 다시 콜백함수를 실행합니다.

3. 위 과정을 반복합니다.

우리가 1초마다 반복하는 setInterval 함수를 실행 했다면, 위에서 설명드린 setInterval의 동작에 맞게 우선 1초를 기다리려고 하겠죠?

그렇기 때문에 바로 intervalFunc이 실행되지 못하고 주어진 시간만큼의 딜레이가 발생하게 됩니다.

위의 코드를 그대로 복사해 크롬 콘솔창에 붙여넣어 실행해 보면 위에서 설명한 로직과 같이 1초간의 딜레이가 발생하는 것을 볼 수 있습니다.

우리는 강의 안에서 타이머 실행 버튼을 누르자마자 사용자에게 변화하는 타이머를 보여주어야 하기 때문에 딜레이가 발생하지 않는 것처럼 보이도록 임의로 counterMaker 함수를 한번 실행해 준 것입니다.