스크롤을 반복적으로 할 경우 '깜박임' 현상 발생

이슈발생 이유

• scrolling 중 반복하여 setTimeout()을 호출.
• 첫 setTimeout()이 끝나는 시점에서 수많은 scrolling 호출이 들어가면서 스크롤이 깜빡이는 현상 발생.

해결

  const handleScrollEvent = e => {
    const rankingList: NodeListOf<Element> = document.querySelectorAll('.tab-item');

    for (const activeNode of rankingList as any) {
      if (activeNode.classList.contains('active')) {
        window.clearTimeout(timer);
        if (!activeNode.classList.contains('on')) {
          activeNode.children[0].classList.add('on');
          timer = window.setTimeout(() => {
            activeNode.children[0].classList.remove('on');
          }, 3000);
        }
      }
    }
  };

• timer 변수는 함수 밖에서 선언해야한다. 함수 내에서 선언을 해버리면 반복적으로 timer가 생성되고 삭제되어 여전히 깜박임 현상이 발생.

• 우선 querySelectorAll을 사용해 .tab-item 클래스를 가진 모든 dome 요소들을 가져온다.

• 객체형태의 결과값을 가지고 for문을 돌면서 "active"된 요소를 찾는다.

• active된 요소의 자식 요소를 찾아 css를 추가해주기 위해 class를 추가.

• 이 때, 이미 'on'이 추가된 요소를 필터링해주기 위해 조건문을 넣어준다.

• 해당 className이 없는 dom 요소에 접근해 첫번째 자식요소, 즉 scroll을 걸어줄 요소에 class를 추가한다.

• setTimeout()을 호출해 3초뒤 className 'on'을 삭제

• 이대로 끝내게되면 깜빡임이 계속 발생

• 'on' 클래스의 여부를 파악하기 전 clearTimeout(timer)를 활용하여 setTimeout을 적절히 종료시켜주어야 한다.