JavaScript/jQuery - jak wywołać skrypt po upływie określonego czasu

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.

Kurs Programowania w jQuery

4.9

(193 opinii)

Poznaj najpopularniejszą i niezwykle użyteczną bibliotekę JavaScript Dowiedz się więcej

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().

Kurs HTML i JavaScript - praktyczne projekty

Zobacz kurs

Warsztaty tworzenia stron internetowych

Zobacz kurs

Ekosystem JavaScript - wprowadzenie

Zobacz kurs