• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Fiszki IT
Fiszki IT
0 głosów
231 wizyt
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 (228,380 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 (228,380 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,550 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ź

+1 głos
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 :)

Podobne pytania

0 głosów
1 odpowiedź 263 wizyt
0 głosów
1 odpowiedź 92 wizyt
pytanie zadane 19 marca 2020 w JavaScript przez kubaa322 Użytkownik (710 p.)
+1 głos
3 odpowiedzi 97 wizyt
pytanie zadane 26 kwietnia w JavaScript przez molik Użytkownik (820 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

84,835 zapytań

133,644 odpowiedzi

296,137 komentarzy

56,080 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...