[번역] JavaScript에서 Throttle을 사용하여 애니메이션 구현하기

기사 원문 링크

---

JavaScript에서 Throttle을 사용하여 애니메이션 구현

이 문서에서는 JavaScript에서 스로틀을 사용하여 애니메이션 성능을 향상시키는 방법을 설명하고 스로틀을 적용하여 애니메이션이 고르지 않게 나타나는 문제를 해결합니다. 스로틀 적용 전과 후의 차이점도 비교해보겠습니다.

스로틀이란 무엇입니까?

스로틀(Throttle)은 '특정 시간 간격' 내에 '최대 한 번' 호출되는 기능을 제한하는 기술입니다. 즉, 짧은 시간 내에 이벤트가 여러 번 발생하더라도 스로틀에 의해 설정된 시간 간격 내에 해당 기능은 한 번만 실행됩니다. 예를 들어 Throttle이 100ms인 함수의 경우 1초에 이벤트가 10번 발생하더라도 해당 함수는 최대 10번(100ms 간격) 실행됩니다.

스로틀은 어디에 사용됩니까?

스로틀은 다음과 같은 상황에서 사용할 수 있습니다.

• 과도한 이벤트 트리거로 인한 성능 저하 방지: 짧은 시간 내에 스크롤, 마우스 이동, 창 크기 조정 등의 이벤트가 자주 발생하면 이벤트 핸들러가 과도하게 실행되어 성능 문제가 발생할 수 있습니다. 이를 완화하기 위해 스로틀이 사용됩니다.
• 더 부드러운 애니메이션 만들기: 스크롤 애니메이션과 같이 지속적인 변화를 표현해야 하는 경우 이벤트 빈도에 따라 애니메이션이 끊기거나 끊길 수 있습니다. 스로틀을 사용하면 애니메이션을 더 부드럽게 만들 수 있습니다.

문제: 끊김 현상 및 고르지 못한 스크롤 애니메이션

스크롤 휠 이벤트에 따라 부드러운 스크롤 애니메이션을 구현하려고 시도했으나 스로틀 적용 전 애니메이션이 끊기는 현상이 발생했습니다.

이유: 휠 이벤트가 매우 높은 비율로 발생하여 window.scrollBy 함수가 과도하게 호출되어 브라우저가 모든 요청을 처리하지 못하기 때문입니다.

비교

1. 스로틀을 적용하기 전의 코드

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

이 코드에서는 휠 이벤트가 발생할 때마다 handlerWheel 함수가 실행됩니다. 이 함수는 이벤트의 deltaY 값을 이용하여 스크롤량을 계산하고, window.scrollBy함수를 호출하여 스크롤합니다. 문제는 휠 이벤트가 매우 짧은 기간에 여러 번 발생할 수 있어 window.scrollBy가 과도하게 호출되어 애니메이션이 끊기는 현상이 발생한다는 것입니다.

2. 스로틀 적용 후 코드

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

조절된 코드에서는 throttleTimer 변수를 사용하여 함수 실행을 관리합니다. 프로세스는 다음과 같습니다:

• handlerWheel 함수가 호출되면 throttleTimer가 존재하는지 확인합니다.
• throttleTimer가 존재하는 경우(이전에 설정된 타이머가 여전히 활성 상태임을 의미) 함수는 즉시 반환됩니다. 이렇게 하면 스크롤 애니메이션이 이미 진행 중인 동안 새 스크롤 요청이 처리되는 것을 방지할 수 있습니다.
• throttleTimer가 없으면 event.preventDefault()가 호출되어 기본 스크롤 동작을 방지하고 setTimeout을 사용하여 16ms 후에 window.scrollBy 함수를 실행합니다.
• setTimeout 콜백 함수 내에서 throttleTimer가 null로 설정되어 스로틀이 재설정되고 지연 후 함수가 다시 호출될 수 있습니다.

3. 잠재적인 개선 사항

• setTimeout의 초기 지연

  setTimeout은 조절 메커니즘을 구현하는 데 사용됩니다. setTimeout은 지정된 지연(이 경우 16ms) 이후 콜백 함수를 실행합니다. 결과적으로 첫 번째 휠 이벤트가 발생하면 16ms 지연 후에 window.scrollBy가 호출됩니다. 이러한 초기 지연은 즉각적인 반응이 부족하다는 인식으로 이어질 수 있으며, 특히 빠른 휠 움직임의 경우 말더듬으로 해석될 수 있습니다. (앞으로 더 많은 개선점을 모색하겠습니다...)

위 내용은 [번역] JavaScript에서 Throttle을 사용하여 애니메이션 구현하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!