each문 탈출 질문 있습니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
each문 탈출 질문 있습니다.

QA

each문 탈출 질문 있습니다.

답변 3

본문

스크롤에 반응하는 애니메이션 작업을 진행중인데

$(window).scroll(function () {
if(scrollP > 55.5) {
                    $('.sec03 .num').each(function () {
                        const $this = $(this),
                            countTo = $this.attr('data-count');
               
                        $({
                            countNum: $this.text()
                        }).animate({
                            countNum: countTo
                        }, {
                            duration: 1000,
                            easing: 'linear',
                            step: function () {
                                $this.text(Math.floor(this.countNum));
                            },
                            complete: function () {
                                $this.text(this.countNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));                                //3자리 마다 콤마 표시 적용
                            }
                        });
                    });
                }

 

이런 형태의 소스거든요~

근데 스크롤이 계속 진행될때마다 계속 반복이 되는데 탈출 어떻게 할까요? 한번만 실행되고나면 더이상 반응 안하게 하고싶은데


숫자 다이얼 기능입니다.!

 

이 질문에 댓글 쓰기 :

답변 3

이렇게 하면 되지 않나요?

 

 
var isScrolled = true;
 
$(window).scroll(function () {
if(scrollP > 55.5) {
                if( isScrolled == true ){
                    isScrolled = false;
                    $('.sec03 .num').each(function () {
                        const $this = $(this),
                            countTo = $this.attr('data-count');
               
                        $({
                            countNum: $this.text()
                        }).animate({
                            countNum: countTo
                        }, {
                            duration: 1000,
                            easing: 'linear',
                            step: function () {
                                $this.text(Math.floor(this.countNum));
                            },
                            complete: function () {
                                $this.text(this.countNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
                                //3자리 마다 콤마 표시 적용
                                return false;
                            }
                        });
                    });
                }
            }
// 플래그 변수 선언
let isAnimated = false;
$(window).scroll(function () {
    // 애니메이션이 아직 실행되지 않았고, 스크롤 위치가 조건을 만족할 때만 실행
    if (scrollP > 55.5 && !isAnimated) {
        $('.sec03 .num').each(function () {
            const $this = $(this),
                countTo = $this.attr('data-count');
            
            $({
                countNum: $this.text()
            }).animate({
                countNum: countTo
            }, {
                duration: 1000,
                easing: 'linear',
                step: function () {
                    $this.text(Math.floor(this.countNum));
                },
                complete: function () {
                    $this.text(this.countNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
                }
            });
        });
        
        // 애니메이션이 시작되면 플래그를 true로 설정
        isAnimated = true;
    }
});

애니메이션 시작 직전에 isAnimated = true;로 플래그를 설정하여

중복 실행 가능성을 완전히 제거해야 합니다.

다시 말해, 스크롤 이벤트가 반복되어도 애니메이션이 중복 실행되지 않습니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
이전 아이콘
다음 아이콘
전체 0
로딩중
© SIRSOFT
현재 페이지 제일 처음으로