여기 어떤 그림이 있는 웹페이지가 있습니다
"안돼, 곧 세상이 끝날거야"라는 이상한 글과 함께요
"정확히, 500초 후에"
저는 이 웹페이지를 좀더 효과적으로 만들어 보려고 합니다
실제 카운트 다운하는 것처럼 바꿔보고 싶어요
그러면, 방문자들이 정확히 얼마만큼의 시간이 남아 있는지 알 수 있겠죠
자, 우리가 웹페이지의 일부분을 애니매이션으로 만들기 위해서
전략은 그 안에 있는 몇 가지 요소를 찾는 것입니다
그러면, 그 요소에 관한 무엇인가가 바뀌게 됩니다
그리고, 특별히 초 단위 시간을 설정하는거죠
그러기 위해서, 첫 번째, ID 로 카운트다운을 찾을 겁니다
간단하죠
[타이핑]
두 번째는, count down 함수를 만들겁니다
[타이핑]
그런 다음 우리가 할 것은
'textCoutent' 를 설정하는 것입니다
이것을 '이전 숫자 - 1 과 같다'고 설정할게요
여기서, 'textContent' 는 실제로는 문자열이 됩니다
우리는 이 문자열을 숫자로 바꾸고 싶어요
'parsefloat()' 함수를 이용할 수 있습니다
그러면, 이전 숫자에서 1을 뺄 수 있게 됩니다
마지막으로, 이 함수를 일정간격으로 호출하게 만들고 싶어요
다시 말하면, 1초당 몇 번을 의미하는 겁니다
그리고, 우리는
'window.setInterval()' 함수를 이용할 수 있습니다
그런데, 이 함수는 2가지 해석이 가능합니다
'callback(;호출) 함수와 '밀리초 시간 대기'
함수가 다시 호출되기 전
우리는 callback 함수를 정의할 수 있습니다
단지 'event listener' 에 대해서 이름을 정의함로써 말입니다
자, 그러면.. 보시는 것처럼 정말 빨리 진행되죠.
왜냐하면, 두 번째 의미를 아직 정의하지 않았기 때문이죠
우리는 그 값을 몇 밀리초가 되게 하고 싶어요
그리고, 1 초에 단지 한 번되기를 원합니다 그래서 1000 이라고 할 겁니다
왜냐하면, 1초는 천 밀리초이니까요
해보죠, 지금 이것은 1초에 한 번씩 카운트다운하게 됩니다
여러분은 490초 후에 가능한 더 많은 것을 배우는게 되면 좋겠습니다.
여기에 'setInterval' 대신 사용하는 window 함수가 하나 더 있습니다
그건 'setTimeout' 입니다
이걸로 바꿔보죠 여러분, 그 차이를 아시겠어요?
잠시만요
OK, 여러분은 아마 지금이 'setTimeout'을 쓸 때라는 걸 알겁니다
이 브라우저는 함수를 단 한번만 호출합니다 반복해서가 아니라요
이것은 애니메이션을 만들 때는 그리 유용하지 않습니다
그렇지만, 어떤 경우에는 매우 유용할 수도 있습니다
만약, 사용자에게 경고 배너 같은 걸 보여 줄 경우라면 말이죠
그리고, 10초 후에 배너를 숨기고 싶다면 말입니다
그럼, 이걸 'setInterval' 로 다시 바꿔볼까요
지금처럼 애니메이션을 테스트할 때,
우리는 애니메이션에서 매 순간 어떻게 나타나는지를 알고 있어야 합니다
0 이 될 때까지, 어떤 일이 일어나는가 처럼 말이죠
글쎄요. 거기까지 도달하기까지 꽤 긴 시간이 걸릴 겁니다
여러분도 아마 진짜 지루해지실거예요
그래서 시작 시간을 그냥 5로 바꿔봅시다
어떻게 되나 보죠
4, 3, 2, 1, 0...
-1, -2
됐습니다. 그런데 아주 이상하게 되고 있네요
세상이 끝날 때는 그냥 "콰쾅"하고 말죠 그리곤 카운팅은 그냥 멈추겠죠
이 순간, 우리가 사실 하고 싶은 것은 이 애니메이션 동작을 멈추는 것입니다
일단, 한번 0에 도달하면 말이죠
그래서 우리는 이 함수 안에 'if' 조건문을 이용할 수 있습니다
그럼, 변수에 현재 시간을 저장하는 것부터 시작해 볼까요
여러 번 이 수를 이용하게 될거니까,
저는 그냥 이걸 여기에 넣어두겠습니다
그리고 'currentTime' 함수로 치환합니다
제가 할 수 있는 거은 'if' 조건을 넣는겁니다
즉, '만약, 'currentTime' 이 0 보다 클 때만 텍스트를 업데이트 한다'
그러면, 실제 숫자 1 씩 빼는 시간이 됩니다
자, 이 함수를 여기 안에 옮겨야 합니다
제대로 작동은 합니다만, 이러한 접근 방식은 어떤 단점이 있습니다.
브라우저가 1초에 한 번씩 매번 'countDown' 함수를 호출한다는 거죠
이 웹페이지가 열릴 때마다 말이죠
여러분은 브라우저가 이유없이 어떤 함수를 호출하게 해서는 안됩니다
해야 할 다른 중요한 작업들도 많으니까요
우리가 진짜 원하는 작업은 브라이저가 단 한 번만 0 이 되도록 진행하게 만드는 겁니다
그 이상 이 함수를 호출할 이유가 전혀 없죠
우리는 'window.clearInterval()' 이라는 새로운 함수를 사용해 봅시다
여기에 'else' 를 넣고, 'window.clearInterval()'
실행을 취소하기 위한 간격을 알게 하기 위해서 인자를 전달할 필요는 없습니다
왜냐하면, 우리는 실제로 한 페이지에 여러 개의 간격을 가질지도 모르기 때문이죠
우리가 취소할 간격을 아는 방식은
변수에 'setInverval' 함수의 결과를 저장하는 것입니다
그러면 타이머 변수로 그 값을 얻게 됩니다 복사해서 거기 안에 붙여넣습니다
그러면, 우리는 취소할 게 무엇인지, 언제 0 에 도달하는지를 알게 됩니다
업데이트를 멈추게 하고, 함수 호출도 중지하게 해야 합니다
여러분이 만드는 모든 애니메이션에서 이 부분을 신중하게 고려해야 합니다
작업을 중지하기 위해서는 어떤 조건이 필요한지에 대해서 말이죠
네, 맞아요. 여러분은 아마도 여러 번 반복해서 진행되는 애니메이션도 만들게 될 겁니다
그런 것들이 실제로는 더 멋진 애니메이션이 될겁니다
여러분의 브라우저가 'callback' 함수를 부를 때마다 작업을 진행해야 하기 때문입니다
이제 프로그램을 동작시켜서 실제 세상이 '쿵쾅!' 하게 만들어 볼까요?