A JavaScriptben vannak olyan helyzetek, amikor meg kell győződnünk arról, hogy az adott webhelyen megadott tartalom pontos és naprakész. Például meg kell jeleníteni a legfrissebb tartalmat egy weboldalon, miközben egy hosszú űrlapot kell kitölteni, és figyelni kell az új változásokat, vagy amikor tesztelni szeretne egy webhelyet. Ilyen esetekben a weboldal 5 másodpercenkénti automatikus frissítése JavaScript használatával nagyon hasznos az ilyen helyzetek kezelésében.
Ez a cikk a weboldalak 5 másodpercenkénti automatikus frissítésének módszereit tárgyalja JavaScript használatával.
Hogyan lehet automatikusan frissíteni a weboldalt 5 másodpercenként JavaScript használatával?
Egy weboldal 5 másodpercenkénti automatikus frissítéséhez JavaScript használatával a következő módszerek használhatók:
- ' setInterval() ” és „ document.querySelector() ” módszerekkel
- ' Frissítés() ” módszerrel
- ' setTimeout() ” módszerrel
Sorolja fel egyenként a tárgyalt módszereket!
1. módszer: Weboldal automatikus frissítése 5 másodpercenként JavaScriptben a setInterval() és document.querySelector() metódusok használatával
Az ' setInterval() ” metódus meghatározott időintervallumban ér el egy funkciót, és a „ document.querySelector() ” metódus megkapja az első CSS-választónak megfelelő elemet. Ezeket a módszereket kombinálva lehet elérni az adott címsorcímkét, és egy időzítő segítségével beállítani az időintervallumot a kívánt funkcióhoz.
Szintaxis
setInterval ( függvény, ezredmásodperc, par1, par2 )A fenti szintaxisban: ' funkció ' arra a funkcióra utal, amelyet el kell érni, ' ezredmásodperc ' a végrehajtandó időintervallum, és ' pár 1 ” és „ par2 ” a további paraméterek.
dokumentum. querySelector ( CSS válogatók )
Itt, ' CSS-választók ” egy vagy több CSS-választót jelentenek.
Tekintse meg a következő példát.
Példa
Először adjon meg egy címet és egy címet a
címkékben:
< cím > Az oldal frissítése 5 másodpercenként < / cím >
< h2 stílus = 'text-align: left' > Az oldal automatikus frissítése < / h2 >
Most állítsa be az időzítő értékét a következőképpen: 1 ”:
hadd időzítő = 1 ;Ezt követően alkalmazza a „ setInterval() ' módszer egy ' 1000 ms ” értékét. Ez másodpercenként növeli az időzítőt. Ezenkívül nyissa meg a megadott címsort, hogy megjelenítse a „ Dokumentumobjektum modell (DOM) ” a beállított időzítőérték végén.
Végül ismételje meg az időzítő értékét a „ 1 ' segítségével ' ++ ” utólagos inkrement operátort, és alkalmazzon egy feltételt oly módon, hogy ha az érték meghaladja az 5-öt, a „ location.reload() ” metódus az ablak újratöltését eredményezi:
setInterval ( ( ) => {dokumentum. querySelector ( 'h2' ) . innerText = időzítő ;
időzítő ++;
ha ( időzítő > 5 )
elhelyezkedés. újratölteni ( ) ;
} , 1000 ) ;
Látható, hogy weboldalunk öt másodpercenként automatikusan frissül:
2. módszer: Weboldal automatikus frissítése 5 másodpercenként JavaScriptben a betöltési esemény használatával
Az ' Feltöltés alatt ” esemény akkor indul el, amikor egy objektum betöltődik. Ez a technika megvalósítható az oldal frissítésére egy felhasználó által definiált függvény segítségével a weboldal betöltésekor.
Szintaxis
tárgy. Feltöltés alatt = frisssítsd az oldalt ( ) { myScript } ;Az adott szintaxisban a „ funkció ” arra a függvényre utal, amelyet az objektum betöltésekor meg kell hívni.
Nézze meg a következő példát.
Példa
Először is adjon meg egy címet és címsort az előző módszerben leírtak szerint:
< cím > Az oldal frissítése 5 másodpercenként < / cím >< h2 > Az oldal automatikus frissítése < / h2 >
Most alkalmazza a „ Feltöltés alatt ' eseményt és meghívja a függvényt ' frisssítsd az oldalt() 'és át' 5000 ” argumentumként, amely öt másodperces időintervallumot jelöl:
< test terhelés = 'JavaScript:refreshPage(5000);' >test >
Végül definiáljon egy '' nevű függvényt frisssítsd az oldalt() ' val vel ' t ” argumentumként, amely a weboldal automatikus frissítésének beállított idejére utal. Az ' location.reload() ” metódus a megadott idő után újratölti az oldalt:
függvény refreshPage ( t ) {setTimeout ( 'location.reload(true);' , t ) ;
}
Kimenet
3. módszer: Weboldal automatikus frissítése 5 másodpercenként JavaScriptben a setTimeout() metódussal
Az ' setTimeout() ” metódus egy adott beállított idő után hív meg egy függvényt. Ez a módszer alkalmazható a weboldal újratöltésére egy meghatározott időkorlát után.
Szintaxis
setTimeout ( függvény, ezredmásodperc, par1, par2 )Az adott szintaxisban a „ funkció ' az elérendő funkcióra utal, ' ezredmásodperc ' a végrehajtandó időintervallum, és ' pár 1 ”, „ par2 ” a további paraméterek.
Példa
A HTML-oldal szkriptcímkéjében alkalmazza a „ setTimeout() ” metódus úgy, hogy 5 másodperc elteltével a location.reload() metódus újratölti a weboldalt:
< forgatókönyv >setTimeout ( 'location.reload(true);' , 5000 ) ;
forgatókönyv >
Kimenet
Megbeszéltük az összes kényelmes módszert a weboldal automatikus frissítésére 5 másodpercenként JavaScript használatával.
Következtetés
Egy weboldal automatikus frissítéséhez 5 másodpercenként JavaScript használatával, használja a „ setInterval() ” és „ document.querySelector() ” módszerek az időzítő értékének beállítására, a „ Frissítés() ' módszer egy weboldal frissítéséhez, vagy a ' setTimeout() ” módszer egy weboldal adott időtúllépési frissítési korlátjának beállítására. Ez a cikk bemutatja a weboldalak 5 másodpercenkénti automatikus frissítésének módszereit JavaScript használatával.