V JavaScripte existujú situácie, kedy potrebujeme zabezpečiť, aby bol zadaný obsah na konkrétnej stránke presný a aktuálny. Napríklad je potrebné zobraziť najnovší obsah na webovej stránke pri vypĺňaní zdĺhavého formulára a sledovaní nových zmien alebo keď chcete web otestovať. V takýchto prípadoch je pri zvládaní takýchto situácií veľmi užitočné automatické obnovovanie webovej stránky každých 5 sekúnd pomocou JavaScriptu.
Tento článok bude diskutovať o metódach automatického obnovenia webovej stránky každých 5 sekúnd pomocou JavaScriptu.
Ako automaticky obnovovať webovú stránku každých 5 sekúnd pomocou JavaScriptu?
Na automatické obnovenie webovej stránky každých 5 sekúnd pomocou JavaScriptu je možné použiť nasledujúce prístupy:
Prejdite si diskutované metódy jeden po druhom!
Metóda 1: Automatické obnovenie webovej stránky každých 5 sekúnd v JavaScripte pomocou metód setInterval() a document.querySelector()
' setInterval() ” metóda pristupuje k funkcii v zadanom časovom intervale a “ document.querySelector() ” získa prvý prvok zodpovedajúci selektoru CSS. Tieto metódy je možné použiť v kombinácii na prístup k špecifickej značke nadpisu a nastavenie časového intervalu na požadovanú funkčnosť pomocou časovača.
Syntax
setInterval ( funkcia, milisekundy, par1, par2 )Vo vyššie uvedenej syntaxi „ funkciu “ označuje funkciu, ku ktorej je potrebné pristupovať, “ milisekúnd “ je špecifický časový interval na vykonanie a “ pár 1 “ a „ par2 “ sú ďalšie parametre.
dokument. querySelector ( CSS selektory )
Tu, ' Selektor CSS ” predstavujú jeden alebo viac ako jeden selektor CSS.
Pozrite si nasledujúci príklad.
Príklad
Najprv zadajte názov a nadpis v značkách
:
< titul > Stránka sa obnovuje každých 5 sekúnd < / titul >
< h2 štýl = 'zarovnanie textu: doľava' > Automaticky obnoviť stránku < / h2 >
Teraz nastavte hodnotu časovača ako „ 1 “:
nechať časovač = 1 ;Potom použite „ setInterval() “ metóda s “ 1000 ms “hodnota. Tým sa bude časovač zvyšovať každú sekundu. Prístup k určenému nadpisu tiež zobrazíte na stránke „ Model objektu dokumentu (DOM) “ na konci nastavenej hodnoty časovača.
Nakoniec zopakujte hodnotu časovača s prírastkom „ 1 ' použitím ' ++ ” po prírastku a použite podmienku takým spôsobom, že ak hodnota presiahne 5, „ location.reload() ” spôsobí opätovné načítanie okna:
setInterval ( ( ) => {dokument. querySelector ( 'h2' ) . vnútornýText = časovač ;
časovač ++;
ak ( časovač > 5 )
umiestnenie. znovu načítať ( ) ;
} , 1000 ) ;
Je vidieť, že naša webová stránka sa automaticky obnovuje každých päť sekúnd:
Metóda 2: Automatické obnovenie webovej stránky každých 5 sekúnd v JavaScripte pomocou udalosti pri načítaní
' načítať ” udalosť sa spustí po načítaní objektu. Táto technika môže byť implementovaná na obnovenie stránky pomocou užívateľom definovanej funkcie pri načítaní webovej stránky.
Syntax
objekt. načítať = refreshPage ( ) { myScript } ;V danej syntaxi „ funkciu “ označuje funkciu, ktorú je potrebné vyvolať pri načítaní objektu.
Pozrite si nasledujúci príklad.
Príklad
Najprv pridajte názov a nadpis, ako je uvedené v predchádzajúcej metóde:
< titul > Stránka sa obnovuje každých 5 sekúnd < / titul >< h2 > Automaticky obnoviť stránku < / h2 >
Teraz použite „ načítať 'udalosť a vyvolajte funkciu' refreshPage() “ a prejsť „ 5000 ” ako argument, ktorý označuje päťsekundový časový interval:
< zaťaženie tela = 'JavaScript:refreshPage(5000);' >telo >
Nakoniec definujte funkciu s názvom „ obnovovacia stránka() “ s “ t ” ako argument, ktorý odkazuje na nastavený čas automatického obnovenia webovej stránky. ' location.reload() ” metóda znovu načíta stránku po zadanom čase:
funkcia refreshPage ( t ) {setTimeout ( 'location.reload(true);' , t ) ;
}
Výkon
Metóda 3: Automatické obnovenie webovej stránky každých 5 sekúnd v JavaScripte Pomocou metódy setTimeout().
' setTimeout() ” metóda vyvolá funkciu po zadanom nastavenom čase. Túto metódu možno použiť na opätovné načítanie webovej stránky po špecifickom nastavenom časovom limite.
Syntax
setTimeout ( funkcia, milisekundy, par1, par2 )V danej syntaxi „ funkciu “ označuje funkciu, ku ktorej sa má pristupovať, “ milisekúnd “ je špecifický časový interval na vykonanie a “ pár 1 “, “ par2 “ sú ďalšie parametre.
Príklad
V značke skriptu stránky HTML použite reťazec „ setTimeout() ” takým spôsobom, keď uplynie 5 sekúnd, metóda location.reload() znova načíta webovú stránku:
< skript >setTimeout ( 'location.reload(true);' , 5000 ) ;
skript >
Výkon
Diskutovali sme o všetkých pohodlných metódach automatického obnovenia webovej stránky každých 5 sekúnd pomocou JavaScriptu.
Záver
Na automatické obnovenie webovej stránky každých 5 sekúnd pomocou JavaScriptu použite „ setInterval() “ a „ document.querySelector() “ metódy na úpravu hodnoty časovača, „ Obnoviť() “ na obnovenie webovej stránky alebo „ setTimeout() ” metóda na nastavenie konkrétneho limitu obnovenia časového limitu webovej stránky. Tento článok demonštroval metódy na automatické obnovenie webovej stránky každých 5 sekúnd pomocou JavaScriptu.