JavaScript & BOM - Timers

Rad sa tajmerima (Timers)

Tajmer je funkcija koja nam omogućuje izvršavanje funkcije u određeno vrijeme. Pomoću tajmera možete odgoditi izvršavanje koda tako da se ne izvrši u trenutku kada se događaj pokrene ili se stranica učita. Na primjer, pomoću tajmera možete u redovnim intervalima mijenjati reklamne natpise na vašoj web lokaciji ili prikazivati sat u stvarnom vremenu itd. U JavaScript postoje dvije funkcije tajmera: setTimeout() i setInterval(). Sljedeći dio će vam pokazati kako stvoriti tajmere za odgađanje izvršavanja koda, kao i kako izvoditi jednu ili više radnji uzastopno koristeći ove funkcije u JavaScript.


Izvršenje koda nakon odgađanja

Funkcija setTimeout() koristi se za izvršavanje funkcije ili određenog dijela koda samo jednom nakon određenog vremenskog perioda. Njegova osnovna sintaksa je setTimeout (funkcija, milisekunde). Ova funkcija prihvata dva parametra: funkciju koja se treba izvršiti i opcionalni parametar odgađanja, koji predstavlja broj milisekundi koji predstavlja količinu vremena na čekanje prije izvršenja funkcije (1 sekunda = 1000 milisekundi). Pogledajmo kako to funkcioniše: 

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">Klikni</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Izvršavanje fukcije nakon nekog vremena</title>
</head>
<body>
    <script>
    function myFunction() {
        alert('Hello World!');
    }
    </script>
     
    <button onclick="setTimeout(myFunction, 2000)">Klikni</button>
    <p><strong>Napomena:</strong> Upozorenje popup, će se 
    pojaviti nakon 2 sekunde od kad ste kliknuli.</p>
</body>
</html>

Gornji primjer će prikazati poruku upozorenja nakon 2 sekunde nakon klika na dugme.


Izvršenje koda u redovnim intervalima

Slično tome, možete koristiti funkciju setInterval() za ponavljanje izvršavanja funkcije ili određenog dijela koda u određenim vremenskim intervalima. Njegova osnovna sintaksa je setInterval (funkcija, milisekunde). Ova funkcija takođe prihvata dva parametra: funkciju koju treba izvršiti i interval koji predstavlja broj milisekundi koji predstavlja količinu vremena na čekanje prije izvršenja funkcije (1 sekunda = 1000 milisekundi). Pogledajmo primjer: 

<script>
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>Trenutno vrijeme na računaru je: <span id="clock"></span></p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Izvršavanje funkciju u redovnim intervalima</title>
</head>
<body>
    <script>
    function showTime() {
        var d = new Date();
        document.getElementById("clock").innerHTML = d.toLocaleTimeString();
    }
    setInterval(showTime, 1000);
    </script>
     
    <p>Trenutno vrijeme na računaru je: <span id="clock"></span></p>
</body>
</html>

Gornji primjer će izvršiti funkciju showTime() više puta nakon 1 sekunde. Ova funkcija dohvata trenutno vrijeme na računaru i prikazuje ga u pretraživaču.


Zaustavljanje izvršavanja koda ili otkazivanje tajmera

I metoda setTimeout() i setInterval() vraćaju jedinstveni ID (pozitivnu cijelu vrijednost, koja se naziva timer identifikator) koji identifikuje tajmer kreiran tim metodama. Ovaj ID se može koristiti za onemogućavanje ili brisanje tajmera i zaustavljanje izvršavanja koda unaprijed. Brisanje tajmera može se izvršiti pomoću dvije funkcije: clearTimeout() i clearInterval (). Funkcija setTimeout() uzima jedan parametar ID i briše tajmer setTimeout() povezan s tim ID-om, kao što je prikazano u sljedećem primjeru: 

<script>
var timeoutID;
 
function delayedAlert() {
  timeoutID = setTimeout(showAlert, 2000);
}
 
function showAlert() {
  alert('Ovo je JavaScript alert box.');
}
 
function clearAlert() {
  clearTimeout(timeoutID);
}
</script>
 
<button onclick="delayedAlert();">Prikaži nakon 2 sekunde</button>
 
<button onclick="clearAlert();">Otkažite upozorenje prije nego što se prikaže</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Prekidanje tajmera uz pomoć metode clearTimeout()</title>
</head>
<body>
    <script>
    var timeoutID;
     
    function delayedAlert() {
      timeoutID = setTimeout(showAlert, 2000);
    }
     
    function showAlert() {
      alert('Ovo jeJavaScript alert box.');
    }
     
    function clearAlert() {
      clearTimeout(timeoutID);
    }
    </script>
     
    <button onclick="delayedAlert();">Prikaži nakon 2 sekunde</button>
     
    <button onclick="clearAlert();">Otkaži upozorenje prije nego što se prikaže</button>
</body>
</html>

Slično tome, metoda clearInterval() koristi se za brisanje ili onemogućavanje tajmera setInterval(). 

<script>
var intervalID;
 
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
 
function stopClock() {
    clearInterval(intervalID);
}
 
var intervalID = setInterval(showTime, 1000);
</script>
 
<p>Trenutno vrijeme na računaru je: <span id="clock"></span></p>
 
<button onclick="stopClock();">Zaustavi sat</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Zaustavljanje tajmera pomoću clearInterval() metode</title>
    <style>
        #clock{
            background: #000;
            padding: 20px;
            margin: 20px 0;
            color: lime;
            display: block;
            font: 48px monospace;
        }
    </style>
</head>
<body>
    <script>
    var intervalID;
     
    function showTime() {
        var d = new Date();
        document.getElementById("clock").innerHTML = d.toLocaleTimeString();
    }
     
    function stopClock() {
        clearInterval(intervalID);
    }
     
    var intervalID = setInterval(showTime, 1000);
    </script>
     
    <p>Trenutno vrijeme na vašem računaru je: <span id="clock"></span></p>
     
    <button onclick="stopClock();">Zaustavi sat</button>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće ovako:

Trenutno vrijeme na vašem računaru je: