0부터 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery

0부터 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (1)

---

어떤 회원수나 구매 수량 등 강조하고 싶은 숫자를 표시할 때 사용자의 시선을 사로잡기 위해 애니메이션을 사용하죠.

그 중 0부터 1씩 증가하다가 표시할 최종 숫자를 보여주는 애니메이션을 구현해 보겠습니다.

 

Environment

• HTML
• Javascript

Thirdparty

• jquery

---

구현

▪️퍼블리싱

숫자가 표시될 요소를 생성합니다.

<div id="cnt"></div>

 

▪️기능

본격적으로 개발하기 전, 중복하여 사용하는 데이터들은 미리 변수로 정의하는 습관을 들이면 좋겠습니다.

const targetNum = 10;	// 표시할 최종 숫자
const jqEl = $("#cnt");	// 숫자 표시할 요소

 

0부터 1씩 증가

0부터 최종 숫자에 도달할 때까지 1씩 증가하는 반복문을 작성합니다.

for (let i = 0; i <= targetNum; i += 1) {
	// TODO - 요소 업데이트
}

 

요소 업데이트

증가된 숫자로 요소 텍스트를 업데이트합니다.

for (let i = 0; i <= targetNum; i += 1) {
    // 요소 업데이트
    jqEl.text(i);
}

간단하죠?

이렇게 실행해 주면....

바뀌는 걸 확인할 새도 없이 순식간에 지나갑니다.

요소가 업데이트되고 사람이 인식할 수 있는 시간 동안 delay 시킬 필요가 있습니다.

 

sleep 메소드 정의

JAVA 등 다른 언어에는 일정시간 동안 실행을 잠시 멈추는 sleep 메소드가 있습니다.

Javascript에는 sleep 메소드가 없으니 직접 구현해 보겠습니다.

 

Javascript에는 일정 시간 후 실행하는 setTimeout() 메소드가 있습니다.

• s millisecond 후 function() 실행

setTimeout(function() {
	// ...
}, s);

 

1씩 증가하는 반복문 안에 요소가 매번 업데이트된 후 일정 시간 동안 sleep 처리를 하고 싶습니다.

그런데 setTimeout()을 반복문 안에 직접 작성해야 하다니...

이 부분을 메소드로 분리하겠습니다.

function sleep(fn, s) {
	setTimeout(fn, s);
}

for (let i = 0; i <= targetNum; i += 1) {
    sleep(() => {
    	jqEl.text(i);
    }, 1000);
}

실행해 볼까요?

 

Javascript는 작성한 코드 순서대로 실행되지만 시간이 오래 걸릴 것 같은 작업은 실행 후 끝날 때까지 기다리지 않고 다음 라인을 실행합니다.

sleep() 메소드를 실행하지만 기다리지 않고 다음 동작으로 바로 넘어가기 때문에 한꺼번에 실행되는 것이죠.

특정 메소드가 끝날 때까지 기다린 후 다음 동작을 실행하는 동기 방식처럼 구현하기 위해 Promise 객체를 사용합니다.

Promise - JavaScript | MDN

 

sleep 메소드가 Promise 객체를 반환하도록 수정합니다.

function sleep(s) {
    return new Promise((res, rej) => {
    	setTimeout(res, s);
    });
}

짠! sleep 메소드가 완성되었습니다 :)

 

sleep 메소드 호출

Promise를 반환하는 sleep 메소드 호출 시 await 키워드로 Promise 가 끝날 때까지 기다리라고 알려줍니다.

await 키워드를 사용한다는 것은 동기 방식처럼 구현하겠다는 의미이므로 await 키워드를 사용하는 메소드명에 async 키워드를 붙여줍니다.

for (let i = 0; i <= targetNum; i += 1) {
    jqEl.text(i);
    await sleep(1000);
}

---

완성❗

전체 소스 보기

function rolling() {
    const jqEl = $("#cnt");
    const targetNum = Number(jqEl.data("num"));

    // 0부터 1씩 증가
    for (let i = 0; i <= targetNum; i += 1) {
        jqEl.text(i);
        await sleep(30);
    }
}