Kolejny wpis poświęcę na napisanie prostego skryptu do odliczania czasu w Jquery. Często takie skrypty wykorzystywane są w stronach i aplikacjach www np. do odliczania czasu pozostałego do automatycznego wylogowania się z aplikacji.

Do tego celu wykorzystam dwie bardzo ciekawe funkcje w JavaScript mianowicie setInterval() oraz clearInterval().

Funkcja setInterval przyjmuje dwa argumenty pierwszym z nich jest funkcja, która jest cyklicznie wywoływana po upływie danego czasu, natomiast drugim jest czas, który określamy w milisekundach(ms) po którym wywołana zostanie funkcja z parametru pierwszego.

Funkcja timer() bo tak ją nazwałem będzie miała za zadanie po upływie jednej sekundy zmniejszyć licznik o 1 oraz wyświetlić poprawny czas, który pozostał. W przypadku wyzerowania licznika należy podjąć odpowiednią akcję np. wylogować użytkownika.

Oto kod:

//Skrypt został pobrany z strony blog.rpodwika.pl 
//można dowolnie używać pod warunkiem pozostawienia informacji skąd skrypt pochodzi
$(function (){
    var count = 60*10; // ustawienie licznika na 60 sekund
    var counter = setInterval(timer, 1000); // ustawienie funkcji odpowiedajacej za cykliczne wywolanie(co 1 s) funkcji timer()
    function timer()
    {
        --count;
        var minutes = Math.floor(count / 60); // obliczanie ile minut zostało
        var sec = count % 60; //obliczanie ile sekund zostało reszta z dzielenia licznika przez 60 sekund
        if(sec<10) sec = '0' + sec; // jeżeli mniej niż 10 sekund to wyświetl sekundy w formacie 00 zamiast 0  
        var out = "Automatyczne wylogowanie za " + minutes + ':' + sec; //tekst wyswietlony uzytkownikowi
        $("#timer").html(out); // przypisanie tekstu timera do odpowiedniego elementu html
        if( count <= 0) //licznik osiągnął 0 
        {
            //licznik się wyzerował należy podjąć odpowiednią akcje
            clearInterval(counter); //zatrzymanie licznika
            return; 
        }
    }
});

Działający przykład możecie zobaczyć tutaj