해결된 질문
작성
·
342
1
안녕하세요.
setInterval강의에서 setInterval(counerMaker, 1000)을 하면 1초 뒤에 실행이 되기 때문에 0일 0시간 0분 0초가 1초 실행되고 그다음에 제대로 실행이 되는데,
이것을 고치기 위해서 counterMaker함수를 자체적으로 한번 실행한다.. 하셨는데 왜 자체적으로 한번 실행해야 고쳐지는지 설명해주실 수 있을까요?
답변 1
0
안녕하세요 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초마다 반복하는 setInterval
함수를 실행 했다면, 위에서 설명드린 setInterval
의 동작에 맞게 우선 1초를 기다리려고 하겠죠?
그렇기 때문에 바로 intervalFunc
이 실행되지 못하고 주어진 시간만큼의 딜레이가 발생하게 됩니다.
위의 코드를 그대로 복사해 크롬 콘솔창에 붙여넣어 실행해 보면 위에서 설명한 로직과 같이 1초간의 딜레이가 발생하는 것을 볼 수 있습니다.
우리는 강의 안에서 타이머 실행 버튼을 누르자마자 사용자에게 변화하는 타이머를 보여주어야 하기 때문에 딜레이가 발생하지 않는 것처럼 보이도록 임의로 counterMaker
함수를 한번 실행해 준 것입니다.
아~~ 왜 함수를 실행해줬는지 이해됐습니다 !!
감사합니다😊😊