<자바스크립트 기초> 18. 스크롤 이벤트 (2)

* 지속적인 스크롤 이벤트

 - 스크롤이 움직일 때마다 캐릭터가 움직이고 스크롤이 멈추면 캐릭터도 멈추는 이벤트를 만든다고 가정하자.

 

 - 이 때 스크롤 때마다 빈번히 일어나는 작업은 자칫하면 메모리를 엄청나게 잡아먹을 수 있다. 즉 스크롤이 움직일때마다 if문이 실행되고 멈추면 다른 if문이 실행되고, 계속 스크롤의 움직임을 확인한다든지 여러 경우가 있다.

 

 - 우리는 효율적인 작업을 위해 Timeout을 사용할 것이다.

 

 - 상태를 나타내기위해 scrollState라는 변수에 미리 false값을 담아두었다. 멈춘 것을 false로 표현하기 위함이다.

 

 - 캐릭터가 움직이는 것은 'moving'이라는 클래스를 추가하여 실행할 것이고, 스크롤이 멈추면 'moving'클래스를 제거하여 캐릭터를 멈출 것이다.

Character.prototype = {
    constructor : Character,
    init: function() {
        const self = this;
        window.addEventListener('scroll', function() {
            clearTimeout(self.scrollState);

            if(!self.scrollState) {
                self.mainElem.classList.add('moving');
            }

            self.scrollState = setTimeout(function() {
                self.scrollState = false;
                self.mainElem.classList.remove('moving');
            }, 500);

        })
    }
}

 : 함수를 살펴보자. 우리는 이 안에서 스크롤 이벤트를 사용하기위해 window를 이용한다. 그러나 이 때 this를 사용하면 window를 의미하므로 미리 self라는 변수를 선언하여 this로 캐릭터를 담아주었다.

 

  이 상태에서 스크롤을 한다고 가정하자. 

 

 ① self.scrollState는 false이므로 if문이 실행되어 'moving'클래스가 추가된다. 즉 캐릭터가 움직이기 시작한다.

 

 ② setTimeout이 실행되는 순간 숫자가 자동으로 return된다. 즉 self.scrollState 에 숫자가 담긴다.

 

 ③ setTimeout의 함수는 500ms 즉 0.5초 뒤에 실행되어야하지만 스크롤이 지속됨에 따라 clearTimeout으로 초기화되어 실행되지 못한다.

 

 ④ self.scrollState에 숫자가 담겨있으므로 if문은 재실행되지 않는다. 이미 moving이 추가되어있으므로 재실행되지 않는 것이 더 효율적이다.

 

 ⑤ 스크롤을 멈추게되면 드디어 0.5초가 지나게 될 수 있으므로 setTimeout의 함수가 실행되어 'moving'클래스를 제거하게 된다.

 

 

 

 

---

 

 

 

참고

 

 

이 글은 인프런에서 관련 강의를 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

인터랙티브 웹 개발

인터랙티브 웹 개발 제대로 시작하기 - 인프런