each문 탈출 질문 있습니다. 채택완료
스크롤에 반응하는 애니메이션 작업을 진행중인데
Copy
$(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자리 마다 콤마 표시 적용
}
});
});
}
이런 형태의 소스거든요~
근데 스크롤이 계속 진행될때마다 계속 반복이 되는데 탈출 어떻게 할까요? 한번만 실행되고나면 더이상 반응 안하게 하고싶은데
숫자 다이얼 기능입니다.!
답변 2개
채택된 답변
+20 포인트
1년 전
이렇게 하면 되지 않나요?
Copy
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;
}
});
});
}
}
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
Copy
// 플래그 변수 선언
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;
}
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인