Kurs JavaScript - Jak zdefiniować czas odświeżania elementu w JavaScript  Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-12-07

Podczas tworzenia skryptów w języku JavaScript, często pojawia się potrzeba uruchamiania pewnej funkcji co jakiś określony czas. Do tego celu służą dwie metody: setTimeout() i setInterval().

MetodasetTimeout() umożliwia jednorazowe wywołanie funkcji za jakiś określony czas:

  • setTimeout (funkcja, czas) – gdzie funkcja jest nazwą funkcji, która ma być uruchamiana za czas milisekund.

Metoda setInterval() umożliwia cykliczne wywołanie funkcji co określony przedział czasowy:

  • setInterval (funkcja, czas) – gdzie funkcja jest nazwą funkcji, która ma być uruchamiana co czas milisekund.

Można także przerwać wykonywanie obu funkcji za pomocą następujących metod: clearTimeout() i clearInterval().

MetodaclearTimeout():

  • clearTimeout(zmienna_setTimeout);

W tej metodzie zmienna_setTimeoutto jest wcześniej przypisana do metody setTimeout() zmienna. Przykładowa konstrukcja z wykorzystaniem metody clearTimeout() wygląda następująco:

varzmienna_Timeout=setTimeout("kod_javascript",milisekundy);
function stop()
{
clearTimeout(zmienna_Timeout)
};

Metoda sclearInterval() jest używana w podobny sposób jak metoda clearTimeout().

Przykład

Przykładowe zastosowanie skryptu, wykorzystującego metody setTimeout() oraz clearTimeout():

<!DOCTYPE html>
<html>
<head>
    <title>Czas na stronie</title>
    <script type="text/javascript">
    var t;
    var c=0;

    function zegar() {
    document.getElementById('txt').value = c;
    c = c + 1;
    t = setTimeout("zegar()", 1000);
    }

    function stopZegar() {
    clearTimeout(t);
    }
    </script>
</head>
<body>

    <form>
    <input type="button" value="Start" onclick="zegar()">
    <input type="text" id="txt">
    <input type="button" value="Stop" onclick="stopZegar()">
    </form>
</body>
</html>

Wynik działania tego skryptu został przedstawiony na Rys. 1.

Rys. 1. Przykład użycia metod setTimeout() oraz clearTimeout() w języku JavaScript.

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać te metody w samouczku: