인프런 커뮤니티 질문&답변

영상을 여러 번 돌려봤는데 너무 헷갈려서요

제가 제대로 이해한 게 맞는지 확인해주셨으면 합니다.

제가 정리한 내용은 다음과 같습니다.

ㅡㅡ

현재 스크롤 상태를 나타내는 scrollState의 기본값은 false이다. 스크롤 이벤트가 실행되면 clearTimeout이 먼저 작동한다. clearTimeout은 setTimeout의 반환값을 매개변수로 하여 setTimeout을 취소시키는 함수이다. 지금은 setTimeout이 실행되지 않았으니 건너뛰고 다음 if문으로 가자. "!(self.scrollState=false)= true", 즉 if(true){} 이므로 if문이 실행된다. running 클래스가 붙어 이제 애니메이션이 작동된다. 다음으로 setTimeout 함수로 가보자. setTimeout은 항상 숫자를 리턴하기 때문에 scrollState는 값을 가지게 되어 true가 된다. setTimeout 안의 내용들은 0.5초 후에 실행되는데 실행되기도 전에 스크롤 이벤트 갱신과 함께 clearTimeout으로 인해 실행되지 못한다. 이제 if문으로 넘어가는데 scrollState가 true이므로 if(!true), 즉, if(false)가 되어 if 문이 실행되지 않는다. 그리고 setTimeout으로 넘어가면 마찬가지로 리턴값을 받아 여전히 true이고, settimeout은 실행되지 않는다. 이렇게 반복되다가 마지막 스크롤일 때 setTimeout이 드디어 실행된다. 왜냐하면 더 이상 스크롤 이벤트가 일어나지 않아 clearTimeout이 동작하지 않기 때문이다. 비로소 scrollstate는 false가 되고 running 클래스는 제거된다.