SetTimeout podczas scrollowania

Question

Witam, tak prezentuje się moja "funkcja". Jestem początkujący w JS, wiec nie mam pojęcia o co chodzi. Mianowicie mam 3 divy na stronie i chciałbym zrobić taki bajer, że jak dojeżdżamy do pewnego momentu to wskakuje jeden, potem drugi, potem trzeci. Niestety w tym momencie wskakują mi wszystkie w jednym czasie i nie mogę nic z tym zrobić, bo gdziekolwiek nie dodam settTimeout to i tak nie działa (set time out odpala się już przy załadowaniu i jak wtedy dojeżdżam scrollem to ikonki już są, albo w ogóle się nie ładują jak pokombinuje i wstawię go w inne miejsca). Wie ktoś może jak to ogarnać na przykładzie mojego kodu? Jakie linijki tam wstawić? Domyślam się, że jeżeli ktoś zna JS'a to zrobi to w 15 sekund :D 

Comments

Bardzo ładnie wstawiłeś to zdjęcie ale lepiej wstaw kod w bloczek do tego przeznaczony. Będzie łatwiej odpalić twój kod w edytorze.

Answer 1

Twój warunek sprawdza przewinięcie dokumentu i jeżeli wartość jest większa niż 650 odpala wszystkie funkcje. Więc efekt jest taki jak jest. Zapoznaj się z metodą getBoundingClientRect i sprawdzaj położenie każdego elementu podczas skrolowania a jak będzie miał wymagane położenie odpal funkcję.

Chyba, że one są na tej samej wysokości i chcesz po prostu odpalić je w jakimś odstępie czasowym to wtedy jak najbardziej użyj setTimeout() dla drugiej i trzeciej funkcji.

Comments

Są w tej samej wysokości, ale jak daje setTimeout to i tak nie działa. Koleś na stacku miał podobny problem, ale nie ogarniam w ogóle o co tam chodzi :D

https://stackoverflow.com/questions/25210104/if-else-statement-with-settimeout-causes-flicker/25210488

---

Chodzi o to, że warunek zostanie spełniony za każdym razem gdy skrol będzie większy niż 650, więc po przekroczeniu tej granicy funkcja będzie odpalana wielokrotnie w zadanym odstępie czasowym, dlatego należy ją wyczyścić.

Poszukaj info o throttle i debounce