Webprogramozás mindenkinek

Kód Akadémia

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

Facebook Tweet Tetszik
0
2017. december 04. - GeorgeL

javascript-1.jpg

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

 

  1. <script>
  2.  
  3. window.setInterval('refresh()', 10000); // A FÜGGVÉNY HÍVÁSA MINDEN 10000 EZREDMÁSODPERCBEN AZAZ 10 MÁSODPERCBEN.
  5. // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
  6. function refresh() {
  7.    window.location.reload();
  8. }
  9.  
  10. </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

    2. <script>
    3. var counter = 10;// VISSZASZÁMLÁLÓvar count_down = window.setInterval(function () {
    6. counter--;
    8. if (counter >= 0) {
    10. var span;
    12. span = document.getElementById("display_counter");
    14. span.innerHTML = counter;
    16. }
    18. if (counter === 0) {
    19. clearInterval(counter);
    20. }
    21. }, 1000);
    23. var page_refress = window.setInterval('refresh()', 10000);
    25. // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
    27. function refresh() {
    28. window.location.reload();
    29. }
    31. </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é:

    1. function stopFunction() {
    2. console.log("button pressed");
    3. clearInterval(count_down);
    4. clearInterval(page_refress);
    5. }

     

     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 …

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    5. <h2>Az oldal újra töltődik <span id="display_counter" style="color:blue;">10</span> másodperc
    6. múlva</h2>
    7. <button onclick="stopFunction()">Stop timer</button>
    8.  
    9. <script>
    11. var counter = 10;
    13. // VISSZASZÁMLÁLÓ
    14. var count_down = window.setInterval(function () {
    15. counter--;
    16. if (counter >= 0) {
    17. var span;
    18. span = document.getElementById("display_counter");
    19. span.innerHTML = counter;
    20. }
    21. if (counter === 0) {
    22. clearInterval(counter);
    23. }
    24. }, 1000);
    26. var page_refress = window.setInterval('refresh()', 10000);
    28. // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
    29. function refresh() {
    30. window.location.reload()
    31. ;}
    33. function stopFunction() {
    34. clearInterval(count_down);
    35. clearInterval(page_refress);
    36. }
    38. </script>
    40. </body>
    41. </html>

    Happy coding!

    Szólj hozzá!

    Ajánlott bejegyzések:

    A bejegyzés trackback címe:

    https://kod-akademia.blog.hu/api/trackback/id/tr8413428019

    Kommentek:

    A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

    Nincsenek hozzászólások.
    süti beállítások módosítása