W poniższym artykule chcę na prostym ale praktycznym przykładzie pokazać ci jak wywołać skrypt po upływie określonego czasu. Sytuacja wygląda następująco: na stronie mam proste okienko z komunikatem skierowanym do użytkownika. Chcę, żeby okienko ładowane było kilka sekund po wczytaniu całej strony.

Moje okienko wygląda tak:

<div id="user-message"> <i class="fa fa-times popover-close-icon"></i> W tym tygodniu zakupiono już 120 sztuk tego produktu. </div>

Jak widzisz jest to banalnie prosta struktura. Właściwe sama zawartość nie ma tu większego znaczenia. Ja w każdym razie muszę to okienko ukryć podczas wczytywania strony i zrobię to dodając do niego regułę CSS:

#user-message { display:none; }

Chcę aby po załadowaniu strony okienko było odsłaniane po upływie 3 sekund.

function showPopover(){ $('#user-message').show('100'); }

Jak widać przygotowałem banalnie prostą funkcję showPopover(), której jedynym zadaniem jest aktywowanie/odsłonięcie okienka. Teraz muszę ją wywołać z właściwym opóźnieniem.

setTimeout(showPopover,3000);

W tym celu użyjemy metody setTimeout(), która przyjmie dwa paramenty: funkcja oraz czas w milisekundach. Czyli po prostu wywołujemy funkcję showPopover() dokładnie po trzech sekundach. Teraz jeszcze wszystko połączymy w całość:

 $(document).ready(function(){ setTimeout(showPopover,3000); function showPopover(){ $('#user-message').show('100'); } }

Czyli mamy tutaj do czynienia z prostym ale skutecznym rozwiązaniem. Na koniec dwie ważne uwagi:

setTimeout() to standardowy element języka JavaScript. Innymi słowy nie potrzebuje do działania żadnych dodatkowych bibliotek (w tym jQuery). Nie sugeruj się więc tym, że w moim przykładzie użyłem jQuery – również dobrze mógłby to być „czysty” JavaScript.Warto również pamiętać o tym, że metoda setTimeout() wywołuje się tylko raz. Jeśli chcesz jakąś funkcję uruchamiać w regularnych odstępach czasu to warto zapoznać się metodą setInterval().