스크롤이벤트가 계속 걸리는데 한번만 하는 방법
본문
안녕하세요 제가 코딩을 공부한지 얼마 안되어 미숙해서 이렇게 글을 올리게되었습니다. 제가 특정 스크롤구간에서 넘버를 카운트하려하는데 이게 스크롤이 움직일때마다 계속 걸리더라구요 .. 제가 작성한 코드도 함께 올립니다. 피드백주시면 정말정말 감사드리곗습니다.
$(function(){
var numAnimation = document.querySelectorAll("#left_skill>ul>li>.skill_count")
function changeNum(idx){
var num = 0 ;
var intervalTime = 15;
var targetNum = numAnimation[idx].getAttribute('data-rate');
var timer = setInterval(function(){
++num;
numAnimation[idx].innerText = num;
if(num == targetNum){
clearInterval(timer);
}
},intervalTime);
}
window.addEventListener('scroll',function(){
scrollAmout = this.pageYOffset;
if(scrollAmout >800){
for(var i =0; i<numAnimation.length; i++){
changeNum(i);}
};
});
});
답변 2
방법은 여러가지인데
1. 동작을 표시해서 scroll 처리 이벤트에서 확인후 동작
1.1. 프로퍼티, 클래스, 애트리뷰트 어느 것을 사용하던지.
2. 한번 실행후 addEventListener로 등록한 이벤트 함수를 removeEventListener 로 삭제
이벤트 리스너 등록할 때
option에서 once 값을 줄 수 수 있는데, 위 조건 봐서는 once로 동작하기엔 부적절 한 듯.
window.addEventListener('scroll',function(){
scrollAmout = this.pageYOffset;
if(scrollAmout >800){
for(var i =0; i<numAnimation.length; i++){
changeNum(i);}
};
});
위 부분을 아래처럼 한번 고쳐보세요.
changeMode = 1;
window.addEventListener('scroll', function() {
scrollAmout = this.pageYOffset;
if (changeMode && scrollAmout > 800) {
for (var i = 0; i < numAnimation.length; i++) {
changeNum(i);
changeMode = 0;
}
};
});
답변 작성하고 나니 뒷북이 되어 버렸네요.ㅜㅠ
답변을 작성하시기 전에 로그인 해주세요.
