• 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

VPS Starter Arubacloud
0 głosów
481 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 (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ź

+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ź 392 wizyt
0 głosów
1 odpowiedź 296 wizyt
pytanie zadane 19 marca 2020 w JavaScript przez kubaa322 Użytkownik (710 p.)
+1 głos
3 odpowiedzi 513 wizyt
pytanie zadane 26 kwietnia 2021 w JavaScript przez molik Użytkownik (950 p.)

92,455 zapytań

141,263 odpowiedzi

319,100 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...