JavaScript - Funkcja zawierająca setTimeout, wywoływana przez setInterval

pytanie zadane 3 września 2019 w JavaScript przez evill Początkujący (260 p.)

Witam

Piszę skrypt, który ma wyświetlać animowany i wylosowany z tablicy tekst na stronie. Stworzyłem funkcję randomText, odpowiedzialną za losowanie tekstu i wywołanie funkcji z animacją "wejściową" i wyjściową. Aby tekst wyświetlał się w odpowiednim momencie zastosowałem funkcję setTimout:

function randomText(){
                     
       ...
        
        setTimeout(fadeIn, 200);
        setTimeout(fadeOut, 3000);


    }

Chcę, by funkcja była wywoływana ciągle - stąd pomysł na zastosowanie setInterval, już w funkcji głównej skryptu.

window.setInterval(randomText(), 3500);

Na stronie funkcja wywołuję sie, ale tylko raz. Czytałem o clearTimeout, niestety próbowałem go stosować przed jak i za funkcjami setTimout i setInterval. Podejrzewam, że problem leży w "czyszczeniu" timeouta.

Proszę o propozycję rozwiązania problemu

Pozdrawiam

Kamil

komentarz 3 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)

a dlaczego nie zrobisz tego w CSS z użyciem @keyframes i odpowiednim duration i delay? Ja bym szedł w tą właśnie stronę, a w JS ewentualnie dodawał lub usuwał sobie odpowiednią klasę odpowiedzialną za animację.

Nie idź z tym w JS, nie ma to raczej sensu przy dzisiejszych możliwościach CSS.

komentarz 3 września 2019 przez evill Początkujący (260 p.)

Tak to jest właśnie zrobione, za animację odpowiada CSS, a JS podmienia klasy i jest odpowiedzialny za czas animacji

komentarz 3 września 2019 przez Tomek Sochacki Ekspert (227,510 p.)

i jest odpowiedzialny za czas animacji

a dlaczego tego też nie dasz do css :) ? w @keyframes możesz sobie ustawiać procentowe progi dla różnych animacji, a potem ustaw sobie odpowiednio animation-duration i delay czy jak tam sie nazywały te parametry (rzadko siedzę w animacjach).

komentarz 4 września 2019 przez wsnofi Bywalec (2,680 p.)

window.setInterval(randomText(), 3500);

A przepraszam bardzo co robi nawias w pierwszym parametrze, poza tym rzuca ci jakiś błąd? Pokaż cały kod.

1 odpowiedź

odpowiedź 3 września 2019 przez Meracle Nowicjusz (160 p.)

Cześć. Pomyśl o sposobie następującym. Stwórz sobie zmienną która przechowywać będzie wartość boolean. Na początku może to być wartość false. Przy pierwszym timeoucie ustaw wartość tej zmiennej na true a przy drugim timeoucie na false(skoro występują jedna po dugiej to dlaczego by nie skorzystać z tak zwanej „flagi”). Teraz instrukcją warunkową sprawdź czy wartość jest false, jeśli tak to zrób clearTimeout obu funkcji. Musisz jednka pamiętać by wcześniej te timeouty przypisać do zmiennej. W efekcie timeouty będą wsztrzymane a Ty będziesz mógł zająć się dalszą logiką aplikacji :)