each문 탈출 질문 있습니다.
본문
스크롤에 반응하는 애니메이션 작업을 진행중인데
$(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;로 플래그를 설정하여
중복 실행 가능성을 완전히 제거해야 합니다.
다시 말해, 스크롤 이벤트가 반복되어도 애니메이션이 중복 실행되지 않습니다.
if (scrollP > 55.5 && !isAnimated) {
isAnimated = true; // 애니메이션 시작 직전에 플래그를 설정
$('.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, ',')
);
}
}
);
});
}
답변을 작성하시기 전에 로그인 해주세요.
