Skrypt przestaje działać po przełączeniu karty

Question

Witam,
Mam problem. Mam stworzony skrypt na przemienianie linków tekstu i slider. Problem w tym skrypcie jedyny jaki jest to taki że jak ktoś wyjdzie z karty i wróci na stronę to wszystko się rozjeżdża i nie jest dopasowane. Zdjęcia są różne niż napis i link. Potrzebuję by zawsze to działało razem jak mogę to naprawić?

Z góry dziękuje za pomoc!

Codepen:
https://codepen.io/zjebee/pen/bGQyBXp

Answer 1

Rozjeżdża się, bo nieaktywne karty spowalniają/wstrzymują liczniki czasu, a z kolei requestAnimationFrame() jest całkowicie wstrzymane. W związku z tym, że slider używa rAF a skrypt do pisania tekstu setTimeout(), to synchronizacja pomiędzy tymi dwoma całkowicie sie rozjeżdża.

Rozwiązaniem jest tutaj stworzenie jednego licznka, który by obsługiwał jedno i drugie (osobiście proponuję przesiadkę na rAF). Wówczas nie byłoby problemu z synchronizacją.

Comments

A mógłbyś przerobić jakąś część kodu bym wiedział o co chodzi?

---

Trudno byłoby przerobić tylko fragment. Ogólnie chodzi o np. zamianę tego fragmentu

 setTimeout(function () {
            that.tick();
        }, delta);

na wywołanie requestAnimationFrame(). Najlepiej za to przenieść to jakoś do funkcji startCarousel() i zrobić z niej funkcję odpalającą wszystkie animacje.