안녕하세요 질문 있습니다
영상을 여러 번 돌려봤는데 너무 헷갈려서요
제가 제대로 이해한 게 맞는지 확인해주셨으면 합니다.
제가 정리한 내용은 다음과 같습니다.
ㅡㅡ
현재 스크롤 상태를 나타내는 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 클래스는 제거된다.
답변 2
0
맞습니다! 정리를 너무 잘 해주셨네요^^
스크롤 중에는 clear로 인해 setTimeout이 실행될 일이 없다가, 스크롤을 멈추면 비로소 0.5초 후에 실행이 되는 원리가 맞습니다.
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
100
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
127
1
animation이벤트 질문이요!
0
71
1
resize handler에서 질문이 있습니다.
0
110
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
217
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
148
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
265
1
rotateY()에서 deg에 따른 차이
0
197
1
코드 작성 순서
0
275
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
394
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
265
2
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
324
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
359
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
304
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
305
2