JS) 스크롤 이동시 숫자카운트

안녕하세요 찐망고입니다.

얼마전 setInterval()을 이용하여 숫자 카운팅하는 포스팅을 했었는데요

 

2023.06.28 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString();

JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString();

 

아무래도 저런 작업을 main문서에 넣다보면 스크롤 이벤트도 막 하고 싶잖아요?

다알아요 하고싶은거..

물론 스크롤이벤트가 가능한 플러그인들도 있긴해요

요즘 

https://greensock.com/gsap-plugins/

Plugins

이친구 이용해서 많이들 쓰던데.. 포스팅할 내용이 넘쳐나네? ^^;

아 저 플러그인 가지고 숫자카운팅도 가능해요

 

일단 넘어가서 코드를 볼게요.

// 숫자카운트
const counter = (counterElement, max) => {
    let now = max;

    const handle = setInterval(() => {
        counterElement.innerHTML = Math.ceil(max - now).toLocaleString();

        if (now < 1) {
            clearInterval(handle);
        }

        const step = now / 10;
        now -= step;
    }, 50);
};


// 스크롤 이벤트
const startCountersOnScroll = () => {
    const numSec = document.querySelector('.num-sec');
    const numSecOffsetTop = numSec.offsetTop;
    let started = false;

    const handleScroll = () => {
        const scrollY = window.scrollY;
        if (scrollY >= numSecOffsetTop && !started) {
            const counters = document.querySelectorAll('.count');
            const maxValues = [20, 2201, 65498];
            counters.forEach((counterElement, index) => {
                setTimeout(() => counter(counterElement, maxValues[index]), 0);
            });
            started = true;
            window.removeEventListener('scroll', handleScroll);
        }
    };

    window.addEventListener('scroll', handleScroll);
};

window.addEventListener('load', startCountersOnScroll);

startCountersOnScroll함수를 하나 만들어서 페이지가 로드되면 바로 스크롤 이벤트가 발생할 때

호출되는 handleScroll 함수를 정의하고 scroll이벤트에 연결했어요.

 

handleScroll 함수는 이벤트가 발생될 때 호출되는 콜백함수고

해당 섹션 클래스를 선택하여 offsetTop값을 할당했구여.

started변수는 카운터 애니메이션이 시작되었는지를 나타내는 boolean값입니다.

스크롤 값이 numSecOffseTop보다 크거나 같고 started값이 false인 경우에만 조건문내의 코드가 실행되는거죠

 

counters변수에 .count클래스를 가진 모든 요소를 NodeList형태로 할당하고

maxValues 변수에 카운터 애니메이션의 최대값을 배열로 할당합니다.

counters NodeList를 순회하면서 각 요소와 해당 인덱스의 maxValues값을 인자로 하여

counter함수를 비동기적으로 호출합니다.

말이 좀 어렵나요?

conters변수는 html구조를 보면 .count클래스를 가진 3개의 요소를 가지고 있어요(아래 코드펜 확인)

counters.forEach()메서드를 사용하여 counters의 NodeList를 순회 합니다.

forEach()메서드는 배열 또는 NodeList의 각 요소에대한 주어진 콜백함수를 실행하고

각 요소와 해당 인덱스를 매개변수로 받습니다.

counters.forEach((counterElement, index) 요 형태의 함수죠

순회중인요소의 counterElement는 현재 .count 클래스를 가진 요소이고 인덱스는 순회중인 요소의 인덱스에요

maxValues는 [ ] 배열 형태로 각 요소의 인덱스에 해당하는 위치에 최대값이 저장되어 있고

counter(counterElement, maxValues[index]) 를 호출하여

counter함수를 비동기적으로 호출 합니다.

이 때, counterElement는 현재 요소이며, maxValues[index]는 해당 인덱스에 대응하는 최대값입니다.

 

started값을 true로 설정하여 카운터 애니메이션이 이미 시작되었음을 표시하고, 

스크롤 이벤트를 더이상 처리하지 않기 위해 scroll이벤트를 제거하는 코드입니다.

 

확인해볼까요? 😊

 

See the Pen 스크롤 숫자카운팅 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

 

* 동기적으로 호출 VS 비동기적으로 호출 *

  1. 동기적 호출(Synchronous Call)

• 동기적 호출은 함수가 호출되면 해당 함수의 작업이 완료될 때까지 호출된 위치에서 대기합니다.
• 즉, 함수가 실행되는 동안 다음 코드 실행이 일시 중단됩니다.
• 동기적 호출은 호출된 함수의 작업이 끝나야 다음 코드가 실행되는 특징을 가지고 있습니다.
• 예를 들어, 함수 A에서 함수 B를 동기적으로 호출하면, 함수 A는 함수 B의 작업이 완료될 때까지 기다리며, 그 후에 다음 코드를 실행합니다.

  2. 비동기적 호출(Asynchronous Call)

• 비동기적 호출은 함수가 호출되면 해당 함수의 작업을 백그라운드에서 실행하고, 호출된 위치에서 대기하지 않고 다음 코드를 실행합니다.
• 함수의 작업이 완료되면 미리 지정된 콜백 함수나 이벤트 핸들러가 호출되어 결과를 처리합니다.
• 비동기적 호출은 호출된 함수의 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 특징을 가지고 있습니다.
• 예를 들어, 함수 A에서 함수 B를 비동기적으로 호출하면, 함수 A는 함수 B의 작업이 완료되지 않아도 다음 코드를 실행합니다. 그리고 함수 B의 작업이 끝나면 지정된 콜백 함수나 이벤트 핸들러가 실행됩니다.

동기적 호출은 순차적인 실행을 보장하고, 결과를 기다려야 할 때 유용합니다. 

하지만 작업이 느려지면 다음 코드 실행을 멈추므로 효율성이 떨어질 수 있습니다.
비동기적 호출은 작업이 백그라운드에서 실행되므로 다음 코드를 실행하는 동안 다른 작업을 수행할 수 있습니다. 

특히 네트워크 요청이나 파일 로딩과 같은 I/O 작업에 유용합니다. 

작업이 완료되면 콜백 함수를 호출하여 결과를 처리할 수 있습니다.

결론적으로, 동기적 호출은 호출된 함수의 작업이 완료될 때까지 대기하며 순차적인 실행을 보장합니다. 

반면에 비동기적 호출은 호출된 함수의 작업이 완료될 때까지 기다리지 않고 

다음 코드를 실행하며 병렬적인 실행을 가능하게 합니다.