스크롤이벤트가 계속 걸리는데 한번만 하는 방법

Question

안녕하세요 제가 코딩을 공부한지 얼마 안되어 미숙해서 이렇게 글을 올리게되었습니다. 제가 특정 스크롤구간에서 넘버를 카운트하려하는데 이게 스크롤이 움직일때마다 계속 걸리더라구요 .. 제가 작성한 코드도 함께 올립니다. 피드백주시면 정말정말 감사드리곗습니다.

Copy

$(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);}
      };
    });
       
});

HEAVENS · Accepted Answer

방법은 여러가지인데
1. 동작을 표시해서 scroll 처리 이벤트에서 확인후 동작
1.1. 프로퍼티, 클래스, 애트리뷰트 어느 것을 사용하던지.
2. 한번 실행후 addEventListener로 등록한 이벤트 함수를 removeEventListener 로 삭제

이벤트 리스너 등록할 때
option에서 once 값을 줄 수 수 있는데, 위 조건 봐서는 once로 동작하기엔 부적절 한 듯.

비타주리 · Answer

[code] window.addEventListener('scroll',function(){ scrollAmout = this.pageYOffset; if(scrollAmout >800){ for(var i =0; i 800) { for (var i = 0; i < numAnimation.length; i++) { changeNum(i); changeMode = 0; } }; }); [/code] 답변 작성하고 나니 뒷북이 되어 버렸네요.ㅜㅠ

스크롤이벤트가 계속 걸리는데 한번만 하는 방법

답변 2개

공유하기