Ezt a bejegyzést nem tart tovább 3 percnél elovasni!

 

A weboldal automatikus frissítése a Javascript setInterval() és visszaszámláló használatával

A JavaScript setInterval() metódus segítségével hívhatsz egy függvényt vagy végrehajthatsz egy általad megadott kódot, meghatározott időközönként. Ebben a bejegyzésben mutatok két egyszerű példát arra, hogyan tudod frissíteni vagy újratölteni a weboldalt minden 10. másodpercben a JavaScript setInterval() használatával és hogy tudod megállítani a frissítést a clearInterval() segítségével.

A setInterval() metódusának szintaxisa

Window.setInterval(code, delay)

  • A code reprezentálja a futtatni kívánt függvényt vagy egyéb kódot
  • A delay határozza meg mennyi késleltetés legyen a code futtatása előtt, ezredmásodpercben megadva

A setInterval() mindaddig hívja a függvényt (code), amíg a clearInterval() meghívásra nem kerül, vagy az ablak be nem záródik.

Az alábbi példámban egy függvényt hívunk meg (egy felhasználó által definiált függvényt) ami 10 másodpercenként újratölti az oldalt.

A setInterval() használata

<script>
    window.setInterval('refresh()', 10000); 	// A FÜGGVÉNY HÍVÁSA MINDEN 10000 EZREDMÁSODPERCBEN AZAZ 10 MÁSODPERCBEN.

    // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
    function refresh() {
        window.location.reload();
    }
</script>

 

Visszaszámláló készítése az oldal frissítéséhez

Készítsünk egy visszaszámlálót a setInterval() metódus használatával, amely mutatja a hátralévő másodperceket az oldal automatikusan újratöltődéséig.

A példa kód minden másodpercben frissíti a <span> elemet amely megjeleníti a hátralevő másodperceket.

A HTML kód

<!DOCTYPE html>
<html>
<body>

<h2>Az oldal újra töltődik <span id="display_counter" style="color:blue;">10</span> másodperc múlva</h2>

</body>
</html>

 

A Javascript kód


<script>
   var counter = 10;


   // VISSZASZÁMLÁLÓ

   var count_down = window.setInterval(function () {

       counter--;

       if (counter >= 0) {

           var span;

           span = document.getElementById("display_counter");

           span.innerHTML = counter;

       }

       if (counter === 0) {

           clearInterval(counter);

       }


   }, 1000);


   var page_refress = window.setInterval('refresh()', 10000);


   // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE

   function refresh() {

       window.location.reload();

   }
</script>

 

A clearInterval() használata

A HTML kód

Illeszd be a fentebbi HTML-kódba a következő sort a <div> tag alá:

<button onclick="stopFunction()">Stop timer</button>

A Javascript kód

Illeszd be a fentebbi HTML-kódba a következő sort a <script> tagok közé:

function stopFunction() {
        console.log("button pressed");
        clearInterval(count_down);
        clearInterval(page_refress);
}

 

 Végezetül

A JavaScript setInterval() különböző célokra használható. Fentebb csak két egyszerű példát mutattam be arra vonatkozóan, hogyan lehet automatikusan és többször végrehajtani.

Ne feledd, a setInterval() mindaddig futni fog amíg meg nem hívod a clearInterval() függvényt!

És itt a teljes forrás kód …

<!DOCTYPE html>
<html>
<body>

<h2>Az oldal újra töltődik <span id="display_counter" style="color:blue;">10</span> másodperc múlva</h2>

<button onclick="stopFunction()">Stop timer</button>


<script>
    var counter = 10;

    // VISSZASZÁMLÁLÓ
    var count_down = window.setInterval(function () {
        counter--;
        if (counter >= 0) {
            var span;
            span = document.getElementById("display_counter");
            span.innerHTML = counter;
        }
        if (counter === 0) {
            clearInterval(counter);
        }

    }, 1000);

    var page_refress = window.setInterval('refresh()', 10000);

    // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
    function refresh() {
        window.location.reload();
    }
    
    function stopFunction() {
        console.log("button pressed");
        clearInterval(count_down);
        clearInterval(page_refress);
}

</script>

</body>
</html>

 

Happy coding!